使用jQuery更改CSS规则定义

Question

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

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

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

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

当涉及100个而不是1000个嵌套<ul>和<li>需要更改时，看起来这比性能更好，而不是试图让jQuery通过{ {1}}方法。

我找到了this example - 这就是我要做的事情：

.css()

我不是要交换类（var style = $('<style>.class { width: 421px; }</style>') $('html > head').append(style); ），因为我不能为每个最佳宽度（379px，387px，402px ..）提供类。

我可以创建一个$el.removeClass().addClass()元素并动态设置宽度，但我认为有更好的方法。

Answer 1

原生JS方法：can jquery manipulate the global css definition of the document?

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

Answer 2

document.styleSheets [0] .addRule 适用于Chrome，在FF中不是“功能”

Answer 3

对我来说有用的是在标题中包含一个空样式块：

<style id="custom-styles"></style>

然后用这样的东西操纵它：

$('#custom-styles').text('h1 { background: red }')

我测试过这似乎适用于当前版本的Chrome（嗯，Chromium - 63.0）和Firefox（57.0.4）。