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.

Answer 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).