如何始终删除特定元素的内联样式？

Question

How to always remove inline style for specific element?

I use this code to remove my style :

jQuery('.myelement').removeAttr('style');

but it's not work probably because another js code is adding inline style after me code to remove it. There is no .js file after my file is called.

I know I can edit the .js file from the photo plugin but if I update the plugin, I will loose my changes.

How can I write in jQuery something to tell that this element will never have inline style?

Answer 1

To ensure an items style is always empty, even if some other code runs after yours you can use a mutation observer to reset the style whenever the style attribute of the node changes, like this

 let element = document.querySelector(".myelement"); let observer = new MutationObserver((m) => { if (element.style.length > 0) { element.style = {}; } }); observer.observe(element, { attributes: true, attributeFilter: ["style"] }); // now this wont do anything element.style.backgroundColor = "red"; 

 <div class="myelement"> unicorn </div>