使用 jQuery 更改 CSS 规则定义答案

【问题标题】：Alter CSS rule definition using jQuery使用 jQuery 更改 CSS 规则定义
【发布时间】：2012-02-09 01:21:58
【问题描述】：

假设您要更改许多元素的宽度，例如模拟一个表格。我知道你可以这样做：

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

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

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

当涉及到 100 个（如果不是 1000 个）嵌套的 <ul> 和 <li> 需要更改时，这似乎比尝试让 jQuery 通过 .css() 方法完成工作更好。

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

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

我没有尝试交换类 ($el.removeClass().addClass())，因为我不能为每个最佳宽度（379px、387px、402px..）设置一个类。

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

【问题讨论】：

我真的认为您应该在 CSS 中编写两个类，并在需要时添加/删除适当的类。你不应该在 JS 中弄乱你的样式表，它很快就会变得无法维护。
@kapa，这有其局限性，因为所有的 CSS 都必须提前定义。例如，您不能突出显示任意第 n 个子元素：#root>div:nth-child('+Nth+') { background: red; }

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

然后用这样的东西来操作它：

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

我已经测试过这似乎可以在当前版本的 Chrome（嗯，Chromium - 63.0）和 Firefox (57.0.4) 中工作。

【讨论】：