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 — Michael Berkowski
– Michael Berkowski, Commented Feb 1, 2012 at 15:18
when using toggleClass('tile') you are adding tile to existing class — mgraph
– mgraph, Commented Feb 1, 2012 at 15:20

Community · Accepted Answer · 2017-05-23 12:00:35Z

4

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

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Feb 1, 2012 at 15:23

Zakaria

15.1k22 gold badges87 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

purew Over a year ago

This no longer works, FF says "SecurityError: The operation is not secure" about this line: var rules = ss[i].cssRules || ss[i].rules;

Stefan · Accepted Answer · 2012-02-01 15:24:57Z

1

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

answered Feb 1, 2012 at 15:24

Stefan

5,6624 gold badges28 silver badges32 bronze badges

Comments

Elen · Accepted Answer · 2012-02-01 15:16:57Z

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 1, 2012 at 15:16

Elen

2,3433 gold badges24 silver badges47 bronze badges

1 Comment

Brian Over a year ago

should be class "tile" I kept seeing it as title also. :)

Justin Niessner · Accepted Answer · 2012-02-01 15:17:37Z

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 1, 2012 at 15:17

Justin Niessner

246k40 gold badges416 silver badges546 bronze badges

2 Comments

Stefan Over a year ago

He might want to toggle the background.

zaf Over a year ago

Tried this first but firefox came back with errors in the function. Maybe the way I'm loading stylesheets...? Anyway - found the solution.

Diodeus - James MacFarlane · Accepted Answer · 2012-02-01 15:18:34Z

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 1, 2012 at 15:18

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Comments

mgraph · Accepted Answer · 2012-02-01 15:18:58Z

0

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

answered Feb 1, 2012 at 15:18

mgraph

15.3k4 gold badges43 silver badges76 bronze badges

Comments

Eric Di Bari · Accepted Answer · 2012-02-01 15:24:37Z

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 1, 2012 at 15:24

Eric Di Bari

3,8777 gold badges42 silver badges49 bronze badges

Comments

Jeremy Howard · Accepted Answer · 2012-02-01 15:25:48Z

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 1, 2012 at 15:25

Jeremy Howard

1766 bronze badges

1 Comment

zaf Over a year ago

The background image is only known at runtime. Its dynamic.

Josh Jones · Accepted Answer · 2012-02-01 16:02:42Z

0

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

answered Feb 1, 2012 at 16:02

Josh Jones

1746 bronze badges

Collectives™ on Stack Overflow

Update CSS rule property value

9 Answers 9

1 Comment

Comments

1 Comment

2 Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

1 Comment

Comments

1 Comment

2 Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related