My div looks something like this:
<div tabindex="0" role="button" id="profile-pic" style="background-image: "Some url";"></div>
The background image will be updated based on some criteria. I want to set listener to the style property and listen to background image change. Is it possible?
It's possible with MutationObserver, but it's a somewhat odd thing to do:
console.log('Script start'); const div = document.querySelector('div'); const o = new MutationObserver(() => { console.log('style changed'); }); o.observe(div, { attributes: true, attributeFilter: ["style"] }); setTimeout(() => { div.style.backgroundImage = 'url(https://www.gravatar.com/avatar/34932d3e923ffad9a4a1423e30b1d9fc?s=48&d=identicon&r=PG&f=1)'; }, 500);
<div tabindex="0" role="button" id="profile-pic" style="background-image: 'Some url';">xx</div>
It would make a lot more sense for the function that makes the style change to call other functions that need to know that the change happened.
You can use MutationObserver
Then code example:
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutationRecord) {
console.log('style changed!');
});
});
var target = document.getElementById('myId');
observer.observe(target, { attributes : true, attributeFilter : ['style'] });
Note: this only works with inline styles(any changing of styles), not when the style changes as a consequence of class change or @media change This is a answer https://stackoverflow.com/a/20683311/3344953
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.