Menu
I am trying to detect the CSS property changes in an element. I searched online and found MutationObserver javascript API. but in my test script it is not working as expected( it's not alerting the property name and property value).
var foo = document.getElementById("hideit");
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
alert('mutation.type = ' + mutation.type);
});
});
observer.observe(foo);
observer.disconnect();
$(function() {
$("#clickhere").on("click", function() {
$("#hideit").slideToggle('fase');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
<div id="clickhere">click to toggel</div>
<div id="hideit" style="display:none;">this is the content of the hide/show toggle</div>
</body>and it shows a javascript error
TypeError: Argument 1 of MutationObserver.observe is not an object.
Thanks is advance
980
There're 2 problems in your code:
observer.observe is incorrect. It should take 2 params: Node and MutationObserverInit. See the correct API here.observer.disconnect(); immediately after observe. Disconnect stops observing.Working example
148
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
