Jquery设置类属性不起作用

时间:2011-07-26 09:23:16

标签: jquery css

我有一个CSS类,我希望设置它的宽度属性:

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

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

然而,这似乎没有做任何事情,宽度保持不变!有什么想法吗?

2 个答案:

答案 0 :(得分:3)

您无法向CSS类添加任何内容。 CSS类是静态的。

您在上面做的是将width样式属性添加到页面上li的{​​{1}}类ul中的任何控件.year-wrapper

我的猜测是,在列表项加载到页面之前,您在页面脚本中过早地运行此脚本。请尝试以下操作以确保页面已完成加载:

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

});

答案 1 :(得分:2)

如果你真的想要修改类,你可以使用普通的普通旧Javascript,但jQuery中没有任何东西可以让它变得更容易:

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

跨浏览器向css类添加规则的示例:

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

这只是一个简单的例子btw,它将新规则附加到样式表中。如果您想要访问当前规则并只添加width:样式,则会稍微复杂一些。