Question

49

MutationObserver and current/computed CSS styles

rated 0 times [ 54] [ 5] / answers: 1 / hits: 20553 / 11 Years ago, wed, december 4, 2013, 12:00:00

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 for img 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 with setTimeout 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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

marisela

Add To Favorites

Follow

Total Points: 103

Total Questions: 105

Total Answers: 102

Location: Solomon Islands

Member since Fri, Oct 8, 2021

3 Years ago

marisela questions

1 Access to XMLHttpRequest at '…' from origin 'localhost:3000' has been blocked by CORS policy

Wed, Aug 25, 21, 00:00, 3 Years ago

1 How to escape double and single quotes in a JSON array

Wed, Oct 21, 20, 00:00, 4 Years ago

1 TypeError: Cannot read property 'contentWindow' of undefined

Sat, Aug 15, 20, 00:00, 4 Years ago

1 Jest import statement: 'TypeError: Cannot set property 'fillStyle' of null'

Sun, Aug 2, 20, 00:00, 4 Years ago

1 Validation using Yup to check number length

Tue, Nov 19, 19, 00:00, 5 Years ago

View All

answered 11 Years ago adrianobeds · Accepted Answer

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, ...) and element.style.whatever = something.

Catch new style and link elements with the mutation observer, add an onload 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]);

        }

    }

};