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.