使用jQuery更改CSS规则定义

Question

例如,假设您想要更改许多元素的宽度,以模拟表格.我意识到你可以做到这一点:

$(".class").css('width', '421px');

这会改变每个元素的内联style='width: 421px;'属性.现在,我想要做的是:改变实际的CSS规则定义:

.class {
    width: 375px;  ==[change to]==> 421px;
}

当涉及到100而不是1000的嵌套<ul>并且<li>需要更改时,似乎这比尝试让jQuery通过该.css()方法完成工作更好.

我找到了这个例子 - 这就是我要做的事情:

var style = $('<style>.class { width: 421px; }</style>')
$('html > head').append(style);

我不是要交换classes($el.removeClass().addClass()),因为我不能为每个最佳宽度(379px,387px,402px ..)提供类.

我可以创建一个<style>元素并动态设置宽度,但我认为有更好的方法.

Answer 1

原生JS方法:可以jquery操纵文件的全局css定义吗？

Ariel Flesler的jQuery插件:https://github.com/flesler/jquery.rule

Answer 2

document.styleSheets[0].addRule在 Chrome 中工作，在 FF 中“不是函数”