Quote:
Originally Posted by xelawho
I'm having trouble understanding how to read the results of the callback,
...
In the simple example below, all I want to observe is when the div changes to display block. With the DOMAttrModified event listener it would give you a newValue which you could use. But as far as I can get into the mutation observer is when it tells me there has been a style change.
|
Just going by
https://developer.mozilla.org/en-US/...tationObserver , you just read the MutationRecord properties.
In the case of a
style change, it's seems it's just 'style' that's returned in
attributeName rather than its changed property, so you have then to test the property you want. This is an example I built for testing:
Code:
<html>
<head>
<title>MutationObserver</title>
</head>
<body>
<div id='theDiv' style='display:block'>The Div</div>
<input type=button value='Change' onclick='f("theDiv")'>
<script type="text/javascript" >
function f( id )
{
var elem = document.getElementById( id );
elem.style.display = ( elem.style.display=='block' ? 'none' : 'block' );
}
(function()
{
var elem = document.getElementById( 'theDiv' ),
lastStyle = elem.style.display;
var obs = new MutationObserver( function( mutations )
{
mutations.forEach( function( mutation )
{
if( mutation.type == 'attributes' && mutation.attributeName == 'style' && lastStyle != mutation.target.style.display )
{
lastStyle = mutation.target.style.display;
alert( "Style change; display now set to: " + lastStyle );
}
});
});
obs.observe( elem, { attributes: true, childList: false, characterData: false } );
})();
</script>
</body>
</html>