Jquery setting class attribute not working

Question

I have a CSS class and I wish to set it's width attribute:

ul.month-wrapper li
{
    font-size: 13px;
}
ul.year-wrapper li
{
    font-size: 16px;
}

And the Jquery:

var MonthWidth = 30;
var YearWidth = MonthWidth * 12;

// Set CSS classes widths
$('ul.month-wrapper li').css('width', MonthWidth + 'px');
$('ul.year-wrapper li').css('width', YearWidth + 'px');

However this doesn't seem to do anything, widths remain unchanged! Any ideas?

Just a hint, but you really don't need the 'px' when setting css attributes with jQuery. — zatatatata
– zatatatata, Commented Jul 26, 2011 at 9:29
are you sure there are no other width marked as !important already being set? — codeandcloud
– codeandcloud, Commented Jul 26, 2011 at 9:30

Curtis · Accepted Answer · 2011-07-26 09:27:25Z

3

You can't add anything to a CSS class. The CSS class is static.

What you are doing above is adding the width style attribute to any controls on the page which are li within a ul with the class .year-wrapper

My guess is your running this script too soon in the page script, before the List Items have loaded into the page. Try the following to ensure the page has finished loading:

$(document).ready(function(){
   var MonthWidth = 30;
   var YearWidth = MonthWidth * 12;

   // Set CSS classes widths
   $('ul.month-wrapper li').css('width', MonthWidth + 'px');
   $('ul.year-wrapper li').css('width', YearWidth + 'px');

});

answered Jul 26, 2011 at 9:27

Curtis

104k69 gold badges280 silver badges359 bronze badges

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

2 Comments

Tom Gullen Over a year ago

This is correct thank you, my code was before the li's were generated, not after.

Paul Over a year ago

CSS classes aren't static. You can modify them with javascript, just not with jQuery specifically.

Paul · Accepted Answer · 2011-07-26 09:39:38Z

If you actually want to modify the classes you can use ordinary plain old Javascript, but there's nothing in jQuery to make it easier:

var ss = document.styleSheets[0];
if(ss.insertRule){
    ss.insertRule('ul.month-wrapper li {width: '+MonthWidth + 'px }', ss.cssRules.length);
    ss.insertRule('ul.year-wrapper li {width: '+YearWidth + 'px }', ss.cssRules.length);
}else if(ss.addRule){ // For IE only
    ss.addRule('ul.month-wrapper li', 'width: '+MonthWidth + 'px');
    ss.addRule('ul.year-wrapper li', 'width: '+YearWidth + 'px');
}

Example of cross browser adding rules to css class:

http://jsfiddle.net/Paulpro/sMBeq/

That's just a simple example btw which appends new rules into the stylsheet. If you want to access the current rules and just add the width: style to them it get's slightly more complicated.

Collectives™ on Stack Overflow

Jquery setting class attribute not working

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related