如何更改现有的CSS规则？

Question

我需要更改类的CSS属性值，我发现可以使用document.styleSheets[i].rules和cssRules访问样式表数据，并使用style属性修改每个属性，如此处所述：https://dev59.com/hHRC5IYBdhLWcg3wW_pk#324533 这是一个好主意吗？还是应该使用jQuery的$(".class-name").style("attribute", "value")方法？

第一种解决方案似乎很棒，但我不确定。我很少见到它（或者根本没有见过），并且在检查器中看不到更改（只有在计算面板中）。

- nici

Answer 1

我认为如果您能够使用jQuery，那么它是非常好的。您链接中的示例似乎输出样式而不是更改它们。

您需要的是： $(".class-name").css("attribute", "value")

- treckstar

---

您可以通过属性进行更改。 - nici

Answer 2

var someval = 144;
$('#id').css({'left':someval +'px'});
$('h3').css('color':'red');

点击这里！

使用它，爱上它。

它可以在您的标记中即时插入内联样式，并且只需运行。如果您想应用动态规则-这肯定是您最好的选择。

另外，更好的做法可能是使用.addClass / .removeClass，因为这更易于维护。

- Bosworth99

---

我需要直接更改值（动态计算）- 预定义的类不足够。 - nici

然后使用.css()。我在许多项目中广泛使用它。这是一个非常可靠的解决方案，肯定比试图动态重写样式表要好。 - Bosworth99

我喜欢 .css()。只是一个关于全局设置h3或查询它并使用.css()的问题。 - nici

好的 - 这取决于您需要设置多少规则。即使假设它们很多，我仍然认为通过 .css 进行管理优于尝试修改样式表本身。 - Bosworth99

Answer 3

您无法通过 jQuery 更改现有的 CSS 规则。jQuery 只会影响所选元素的内联样式，因此如果您在加载页面后添加新元素，则它们将继承原始样式表的样式。

如果您的目标是编辑现有的样式表，则唯一的选择是使用 CSS 对象模型（例如，cssRules 等）。请注意，Chrome 检查器不允许您在程序定义这些 CSS 规则后编辑它们，它只显示它们为只读（尽管它们确实出现在计算面板之外）。

您可以使用像 css.js 或 JSS 这样的轻量级库来帮助您。

- Vlad Magdalin