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.

possible duplicate of [Changing a CSS rule-set from Javascript](http://stackoverflow.com/questions/1409225/changing-a-css-rule-set-from-javascript) — Michael Berkowski, Feb 01 '12 at 15:18
Also see http://stackoverflow.com/questions/8224527/how-can-i-edit-a-css-rule-in-jquery — Michael Berkowski, Feb 01 '12 at 15:18
when using `toggleClass('tile')` you are adding `tile` to existing class — mgraph, Feb 01 '12 at 15:20

score 4 · Accepted Answer · edited May 23 '17 at 12:00

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

This no longer works, FF says "SecurityError: The operation is not secure" about this line: var rules = ss[i].cssRules || ss[i].rules; — PureW, Sep 20 '15 at 12:39

score 1 · Answer 2 · answered Feb 01 '12 at 15:24

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

score 0 · Answer 3 · answered Feb 01 '12 at 15:16

0

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

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

answered Feb 01 '12 at 15:16

Elen

2,345
3
24
47

should be class "tile" I kept seeing it as title also. :) – Brian Feb 01 '12 at 15:18

score 0 · Answer 4 · answered Feb 01 '12 at 15:17

0

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

answered Feb 01 '12 at 15:17

Justin Niessner

242,243
40
408
536

He might want to toggle the background. – Stefan Feb 01 '12 at 15:25
Tried this first but firefox came back with errors in the function. Maybe the way I'm loading stylesheets...? Anyway - found the solution. – zaf Feb 01 '12 at 15:42

score 0 · Answer 5 · answered Feb 01 '12 at 15:18

0

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

answered Feb 01 '12 at 15:18

Diodeus - James MacFarlane

112,730
33
157
176

score 0 · Answer 6 · answered Feb 01 '12 at 15:18

0

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

answered Feb 01 '12 at 15:18

mgraph

15,238
4
41
75

score 0 · Answer 7 · answered Feb 01 '12 at 15:24

0

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

answered Feb 01 '12 at 15:24

Eric Di Bari

3,767
7
40
49

score 0 · Answer 8 · answered Feb 01 '12 at 15:25

0

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.

answered Feb 01 '12 at 15:25

Jeremy Howard

174
5

The background image is only known at runtime. Its dynamic. – zaf Feb 01 '12 at 15:44

score 0 · Answer 9 · answered Feb 01 '12 at 16:02

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

Update CSS rule property value

9 Answers9