To detect when CSS property changed using JavaScript, we listen for the DOMAttrModified event.
For instance, we write
document.documentElement.addEventListener(
"DOMAttrModified",
(e) => {
if (e.attrName === "style") {
console.log(e.prevValue, e.newValue);
}
},
false
);
document.documentElement.style.display = "block";
to listen for the DOMAttrModified event on the body element with document.documentElement.addEventListener.
Then we check if the style attribute is changed with e.attrName in the event listener.
We get the previous value of it with e.prevValue and the latest value with e.newValue.
Then when we change the style property, the event will be triggered.
