Question

I have a html element which is styled (using jquery) with a background image targeted thru its class name.

When I remove the class the background image stays – which is not what I expected or want.

test.html

<div id='log' class='tile'>HELLOWORLD</div>

test.css

.tile{
    background: none;
}

test.js

$('.tile').css("background-image", "url(tile.jpg)"); // We see image
$('#log').toggleClass('tile'); //  We still see image

After banging my head I think I know whats happening. The css is being applied to the element – NOT to the ‘class’.

How can I target a specific css rule so that its key values can be updated?

If that makes sense.

Answer 1

If you wan to change the css rules of the “.tile” class, then you can do it.
There is a post that explains it very well :

function changeBackgroundImage(className, value){
        var ss = document.styleSheets;
        for (var i=0; i<ss.length; i++) {
            var ss = document.styleSheets;
            var rules = ss[i].cssRules || ss[i].rules;
            for (var j=0; j<rules.length; j++) {
                if (rules[j].selectorText === className) {
                    rules[j].style.backgroundImage = value;
                }
            }
        }
}

You can call it like this :

changeBackgroundImage(".tile","url(tile.jpg)");