Change CSS rule in class using JQuery

Question

I have a class in CSS

.Foo
{
  width:20px;
}

Using Jquery I would like to do something similar to this on an event:

$(".Foo").css("width", "40px");

This doesn't work. Is this the wrong approach? Should I use addClass() and removeClass()?

EDIT: I figured out my problem. This command does in fact work. In my particular application I hadn't created the elements using the class before I used the command, so when they were created nothing was changed.

Basically this command doesn't change the CSS style rule, just the elements using the class.

can you look at your console and see if your are getting any errors? that command should work — Ascherer, May 24 '11 at 18:50

gilly3 · Answer 1 · 2013-12-26T21:17:59.603

68

You can change a CSS style rule. You need to look at:

document.styleSheets collection
styleSheet.cssRules property (or styleSheet.rules for IE7 and IE8)
rule.selectorText property
rule.style property

For example:

var ss = document.styleSheets[0];
var rules = ss.cssRules || ss.rules;
var fooRule = null;
for (var i = 0; i < rules.length; i++)
{
    var rule = rules[i];
    if (/(^|,) *\.Foo *(,|$)/.test(rule.selectorText))
    {
        fooRule = rule;
        break;
    }
}
fooRule.style.width = "40px";

Working demo: jsfiddle.net/kdp5V

edited Dec 26 '13 at 21:17

answered Aug 10 '11 at 17:13

gilly3

87,962
25
144
176

2

I found this answer very helpful - ultimately, I ended up using something similar to `for (i in document.styleSheets[0].rules) if (document.styleSheets[0].rules[i].selectorText == ".setThisRule") document.styleSheets[0].rules[i].style.maxWidth = "100px";` – andy magoon May 30 '12 at 18:51
@krivar - What version? Works for me in the current release (Version 32.0.1700.72 m). What errors do you see in the JavaScript console? – gilly3 Jan 13 '14 at 22:45
@gilly3 - Error: Uncaught TypeError: Cannot read property 'style' of null - Chromium: Version 31.0.1650.63 (238485) - OS: Manjaro Linux – krivar Jan 19 '14 at 22:07
@krivar - Did you change the jsFiddle? Or, if you click [the link to my jsFiddle](http://jsfiddle.net/kdp5V/), open the JavaScript console, then click "Turn the border blue", *without changing anything*, you see the error? – gilly3 Jan 20 '14 at 18:12
yes, i still get the error. I have not changed anything. My chromium is updated to Version 32.0.1700.77 (244343). [Link to screenshot](http://i.imgur.com/7fQUoZA.png) – krivar Jan 29 '14 at 10:49
2

@krivar - Try this one: http://jsfiddle.net/kdp5V/167/. This is a bit baffling to me. My guess is that the stylesheet containing the rule is not at index 2 in your OS. If this updated jsFiddle works for you, that will confirm it. And, if it fails, it should fail silently (if that's better). – gilly3 Jan 29 '14 at 16:26
yep, @gilly3, this one works good. Border turns blue (also turns double-stroke into single-stroke) – krivar Feb 06 '14 at 09:08
1

Apparently this happens on Chrome: https://code.google.com/p/chromium/issues/detail?id=49001 – Velizar Hristov May 26 '15 at 14:20

score 18 · Answer 2 · edited Sep 12 '16 at 13:37

18

you could add the styling manually to the header with jquery:

  $('head').append('<style id="addedCSS" type="text/css">.Foo {width:40px;}</style>');

then change it on an event like e.g. so:

  $(window).resize(function(){
     $('#addedCSS').text('.Foo {width:80px;}');
  });

edited Sep 12 '16 at 13:37

Bob Stein

16,271
10
88
101

answered Oct 28 '12 at 16:06

nerdess

10,051
10
45
55

Ah, nice one. Simple and elegant, exactly what I was looking for--though now that I re-read the question above, maybe not the best answer here. – Lambart Jul 17 '15 at 07:24
1

P.S. I think you mean `$('head')` (not 'header')! :) – Lambart Jul 17 '15 at 07:28
This is a brilliant technique, to script the style-sheet rule: so if no functioning JavaScript or jQuery, then neither part will execute. – Bob Stein Sep 12 '16 at 13:38
Nice answer for adding and changing dynamic css rule – StefansArya Jul 15 '17 at 13:43

namuol · Accepted Answer · 2011-05-24T20:05:58.007

14

jQuery.css will find all existing elements on the page that have the Foo class, and then set their inline style width to 40px.

In other words, this doesn't create or change a css rule -- if you dynamically add an element with the Foo class, it would still have a width of 20px, because its inline style hasn't been set to override the default CSS rule.

Instead, you should use addClass and removeClass and control the styles in your static CSS.

edited May 24 '11 at 20:05

answered May 24 '11 at 19:07

namuol

9,816
6
41
54

Thanks for the explanation; a code example would've been nice. – wordsforthewise Jan 25 '17 at 01:42
What if the css rule is referenced by id, e.g. `#some-id`? – Antonio Ooi Nov 10 '20 at 10:08

score 3 · Answer 4 · answered May 24 '11 at 18:51

3

Yes, you should use addClass and removeClass to change the styling. In your css, define a couple of different classes and switch between them.

answered May 24 '11 at 18:51

AlbertVo

772
4
9

score 2 · Answer 5 · edited Mar 27 '21 at 19:12

You should be selecting an element with jQuery. You're aware that you aren't selecting the CSS class itself, correct?

Once you have an element with class="Foo", you can select it as you have, and either set css properties manually like you're trying to do, or you can use add class like so:

$(".Foo").addClass('Foo');

Granted of course, since you're selecting the same class that you're adding, it doesn't really make sense.

score 1 · Answer 6 · answered Mar 05 '12 at 21:50

1

I got thsi example in CSS api help in JQuery API.

this worked for me : http://jsfiddle.net/LHwL2/

for complete help read the css api at http://api.jquery.com/css/

answered Mar 05 '12 at 21:50

aked

5,625
2
28
33

score 0 · Answer 7 · edited Mar 27 '21 at 19:11

0

This may work for you.

$(".Foo").css("width", "40px");

edited Mar 27 '21 at 19:11

s.kuznetsov

14,870
3
10
25

answered Feb 20 '16 at 09:33

Shrikantha Budya

646
1
4
15

score 0 · Answer 8 · answered May 24 '11 at 18:53

0

Try using multiple styles

.FooSmall
{
  width:20px;
}
.FooBig
{
  width:40px;
}

$('#theTarget').removeClass('FooSmall').addClass('FooBig');

answered May 24 '11 at 18:53

JaredPar

733,204
149
1,241
1,454

Change CSS rule in class using JQuery

8 Answers8

Linked