MutationObserver and current/computed CSS styles
This works for me...
-
Use a mutation observer to catch changes to the style attribute...
var observer = new MutationObserver(parseMutations); observer.observe(document, { ... attributes: true, attributeFilter: ["style"] }); ... if (mutation.attributeName) //we'll assume it's "style" parseNode(mutation.target); //check for style.backgroundImage and call filterNode()
This works for both
setAttribute("style", ...)
andelement.style.whatever = something
. -
Catch new
style
andlink
elements with the mutation observer, add anonload
event and parse applicable nodes...var stylenodes = ["STYLE", "LINK"]; ... for (var i = 0; i < mutation.addedNodes.length; i++) { var node = mutation.addedNodes[i]; var nodeName = node.nodeName.toUpperCase(); if (stylenodes.indexOf(nodeName) !== -1) node.addEventListener("load", styleLoaded); ... //catch loading of stylenodes and parse all new rules var currentLoadedStyles = []; var styleLoaded = function() { //check all styles and look for one that has just added some rules for (var i = 0; i < document.styleSheets.length; ++i) { if (document.styleSheets[i].rules && document.styleSheets[i].rules.length > 0 && currentLoadedStyles.indexOf(document.styleSheets[i]) == -1) { currentLoadedStyles.push(document.styleSheets[i]); parseNewStyle(document.styleSheets[i].rules); } } }; //look for rules with background images and re-filter all nodes it applies to var parseNewStyle = function(rules) { for (var i = 0; i < rules.length; ++i) { //if any rule contains a background-image (could look for anything here really) if (rules[i].style && rules[i].style.backgroundImage && rules[i].style.backgroundImage != "none") { //get all affected nodes and re-parse them var nodes = document.querySelectorAll(rules[i].selectorText); for (var j = 0; j < nodes.length; ++j) filterNode(nodes[j]); } } };
Related videos on Youtube
jozxyqk
¯(ツ)/¯ f = lambda x: (17*x**4-114*x**3+163*x**2+90*x+792)/12 print(''.join(map(chr, map(f, range(5))))) eJwLT83J0VHIyy9XqMwvVS9KVUjKL0pNUSjJz9dT8FTIyC9IVcgsUShPLFYozy8qyQByFAHJpRGL How to questions? solved.
Updated on June 04, 2022Comments
-
jozxyqk almost 2 years
I'm using a MutationObserver to look for added images to a web page. As many images are displayed via the CSS
background-image
property, I'm checking the current/computed CSS style in addition to looking forimg
tags, for example...var hasBackgroundImage = function(node) { var nodeStyle = node.currentStyle || getComputedStyle(node, null); return ( nodeStyle && nodeStyle.backgroundImage && nodeStyle.backgroundImage != "none" ); };
However, it seems there is a delay between a node triggering a mutation event and the CSS rules being applied so there appears to be no
backgroundImage
during the mutation event even though there will be at some point later. I noticed this when the code worked during debugging (stepping with breakpoints) but didn't work at runtime. Delaying mutation event processing withsetTimeout
also works but to be certain the delay needs to be quite large and changes from page to page (I'm not sure exactly when the CSS rules are guaranteed to be applied). A possible cause may simply be the delayed load or injection of CSS content.What's the best way to achieve this functionality? I guess I'm after an on-style-change mutation, but I doubt this exists.
-
trusktr almost 8 yearsThat seems to work only if the
style
attribute is modified specifically, not if the computed style changes (f.e. due to stylesheet changes). -
jozxyqk almost 8 years@trusktr this will handle changes from new stylesheets. To handle modifications to styles you can use another mutation observer. Also check for changes to external references by src attribute. A more complete example is here: github.com/pknowles/ImageFilter/blob/master/imagefinder.js
-
trusktr almost 8 yearsI see what you mean. So the mutation observer is on the
style
elements, or observing the content ofstyle
attributes. But, what I'd like is observing computedStyle without observing stylesheets or style attributes. I guess Object.observe would have been good for this, but that's removed from spec. -
jozxyqk almost 8 years@trusktr yeah that'd be nice, but short of polling for changes I'm not sure how.
-
kofifus over 6 yearsnote that some sites (ie gmail) load tens of thousands of styles and currentLoadedStyles can get very big