How To React To A Specific Style Attribute Change With Mutation Observers?

I've been experimenting with Mutation Observers, so far I can apply the relevant functions to react upon adding, removing elements and so on. Now I am wondering, is there a way to

Solution 1:

As per the documentation use attributeFilter array and list the HTML attributes, 'style' here:

var observer = newMutationObserver(styleChangedCallback);
observer.observe(document.getElementById('childDiv'), {
    attributes: true,
    attributeFilter: ['style'],
});

var oldIndex = document.getElementById('childDiv').style.zIndex;

functionstyleChangedCallback(mutations) {
    var newIndex = mutations[0].target.style.zIndex;
    if (newIndex !== oldIndex) {
        console.log('new:', , 'old:', oldIndex);
    }
}

Solution 2:

Sorry for offtop. Conception React is no mutations. If you need to listen some changes of some element (style for example). You can use componentDidUpdate and get element from @refs.parentDiv (set ref before this in render function <div id="parentDiv" ref="parentDiv" style="display:none;">) and after check style and set you z-Index value before new render.