使用jQuery修改CSS规则定义

Question

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

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

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

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

当涉及到需要更改成百上千个嵌套的<ul>和<li>时，似乎这比尝试通过.css()方法让jQuery完成工作对性能更好。

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

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

我并不想交换类 ($el.removeClass().addClass())，因为我无法为每个最佳宽度 (379px、387px、402px..) 都设置一个类。

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

- Michael Lewis

---

我认为你应该在CSS中编写两个类，并在需要时添加/删除适当的类。你不应该在JS中搞乱你的样式表，否则它很快就会变得难以维护。 - kapa

@kapa，这种方法有其局限性，因为所有的CSS都必须事先定义好。例如，您无法突出显示任意的nth-child元素：#root>div:nth-child('+Nth+') { background: red; } - wu-lee

Answer 1

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

- user2360953

Answer 2

对我来说有效的方法是在头部包含一个空的样式块：

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

然后使用类似这样的东西进行操作：

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

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

- wu-lee