更新CSS规则属性值

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? :)

Answer 3

try removing class tile and applying new class with bg: none

in effect - when needed apply class with bg, when not needed - without

Answer 4

No need for jQuery in this case. You can use plain old JavaScript. Check out this tutorial:

javascriptkit.com - Changing external style sheets using the DOM

Answer 5

You can't change the class itself without re-writing that declaration in the stylesheet, you ARE working only with the element in the selector.

Try:

$('.tile').css("background-image","none")

Answer 6

$('#log').toggleClass('tile',true); 

Answer 7

I would make the background image part of the class as a css style:

 .tile {background-image: url('tile.jpg')};

and then remove the class when necessary with jquery

 $('#log').removeClass('tile');

Answer 8

you could have two classes in your css...

.tile{ 
    background: none; 
} 

.tile-w-image
{
    background-image: url(tile.jpg);
}

and then with jquery just toggle the classes...

$("#log").toggleClass('tile').toggleClass('tile-w-image');

I'm sure this is just one of many ways of doing this. I hope it helps.

Answer 9

You are very close. It seems like you are adding inline CSS to your element and then trying to toggle the class. You should keep CSS styling separate in most cases:

HTML:

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

jQuery (I imagine this should be done on click or another event):

$('#log').toggleClass('tile'); //  We still see image

If the "tile" class is already written to the HTML, then toggle-ing it will remove it.

CSS:

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