How to detect when CSS property changed using JavaScript?

Spread the love

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.

Leave a Reply

Your email address will not be published. Required fields are marked *