Update CSS rule property value

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)");

Answer 2

The problem is that you´re setting the background-image as an inline stlye that overrides any stylesheet rules. Toggling the class won´t have any affect.

You can either have set the background through a styleheet rule and then add a class that removes it;

#log {
  background-image: url(tile.jpg);
}
#log.tile {
  background: none;
}

or you could just use !important as;

.tile {
  background: none !important;
}

...it might be the other way around but you get the point? :)