什么是改变现有CSS规则的好方法

Question

我需要更改类的css属性的值，我发现我可以使用document.styleSheets [i] .rules和cssRules来访问样式表数据，并使用如下所述的style属性修改每个属性：{{3 }}

这是一个好主意，还是我应该用jQuery做一个$（“。class-name”）。style（“attribute”，“value”）。

第一个解决方案看起来很光滑，但我不确定，我经常（根本没有）看到它并且我没有看到检查器中的更改（仅在计算窗格中）

Answer 1

我想说如果能够使用它，使用jQuery非常好。链接中的示例看起来就是输出样式，而不是更改样式。

$(".class-name").css("attribute", "value")

是你想要的。

Answer 2

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

点击here！

使用它。爱它。

它会动态地将内联样式拖放到您的标记中并且正常工作。 如果你想应用动态规则 - 这当然是你最好的选择。

此外，更好的做法可能是.addClass / .removeClass，因为它更易于维护。

Answer 3

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

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

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