Is there an efficient way to get notified of HTML DOM element attribute changes?

Question

I have a <ul><li> list, and need to be informed about the current width/height of each <li>. Let's say that one of these attributes changes by an external cause (not my own code), e.g., by resizing the browser, by another script, an exchange of styles, or something similar that I cannot control with my own code.

What is the best and most efficient (performance) way to track these changes?

My first solution would be a setInterval(myMonitorFunction, 100), that loops through all relevant DOM elements. This is laggy (100ms), and also consumes a lot of performance the bigger the element list gets.

For form elements there is the onchanged event allowing efficient monitoring of input values. I am looking for something similar (and similar efficient) for all/other DOM element attributes, but could not find any nice solution yet.

gblazex · Accepted Answer · 2011-02-02 11:26:33Z

1

There's a DOMAttrModified event but it's only supported in modern browsers. If you want to support older browsers (like IE) there's no easy way to do this, other than the one you mentioned (which is an overkill of course).

answered Feb 2, 2011 at 11:26

gblazex

50.3k12 gold badges100 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Juve Over a year ago

Thanks, that was exactly what I was looking for. I don't care about old browsers. I am also heavily using SVG, and before anything can go live, I have to wait for the modern browsers to get even more modern, fully supporting the many features of SVG correctly. ;)

Ms2ger Over a year ago

I should note that, while the right answer, mutation events aren't good for performance either.

Collectives™ on Stack Overflow

Is there an efficient way to get notified of HTML DOM element attribute changes?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related