Question

我有一个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');

然而，这似乎没有做任何事情，宽度保持不变！有什么想法吗？

Answer 1

您无法向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');

});

Answer 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:样式，则会稍微复杂一些。

Jquery设置类属性不起作用

2 个答案: