I would like to be notified when a DOM element changes its dimensions. I am only targeting the latest version of Chrome. Is this possible yet?
I found:
- Manually resizing an element doesn't fire a mutation observer in Chrome which is related, but references making an element resizable.
- https://github.com/marcj/css-element-queries This appears to bind to scroll event handlers and record last known size information and then when scroll changes it checks to see if a resize actually happens. I'm wondering if this is the only way to do this currently, or if it's just to support non-modern browsers?
Here's a sample of what I'd like to be able to respond to. This snippet does not print to the console, but I'd like it to since the child's width grows once the parent's width is modified.
var observer = new MutationObserver(function() {
console.log('I fired');
});
var child = document.getElementById('child')
observer.observe(child, {
attributes: true
});
var parent = document.getElementById('parent');
parent.style.width = '400px';
#child {
height: 100px;
width: 100%;
background-color: blue;
}
#parent {
width: 200px;
height: 200px;
}
<div id='parent'>
<div id='child'>
</div>
</div>