Question

我正在寻找一种方法来更改文档中导入的样式表的CSS规则。所以我有一个外部样式表，里面有一些class和div属性。我想用JavaScript或jQuery改变其中一条规则。

以下是一个例子：

.red{
    color:red;
}

所以我的想法是用JavaScript做一些事情并且HTML知道现在color是另一种颜色：

.red{
    color:purple;
}

但是我希望通过追加方式为将来添加的每个元素都有这个规则。因此，如果我使用CSS类span添加.red，则文本必须为紫色而不是红色。

我希望我说清楚。

Answer 1

您可以将样式声明注入DOM。

$("head").append('<style>.red { color: purple }</style>');

Answer 2

你使用jQuery .css()方法来做到这一点。

$('.red').css('color', 'purple');

对于多个规则：

$('.red').css({
    'color': 'purple',
    'font-size': '20px'
});

当您通过追加方式将动态元素添加到DOM中时，只需在追加它们之后为这些元素添加一些class或id并编写如上所述的CSS规则，它们将会适用于所有动态创建的元素。

的 Working sample

注意

在我看来，添加动态规则并不是一个好的解决方案。而不是你可以加载一些外部CSS文件。

但如果您需要类似动态规则的方法，请添加方法：

$('head').append( $('<style/>', { id: 'mystyle', html: '.red {color: purple }' }) );

以备将来使用：

$('#mystyle').append(' .someother { color: green; font-size: 13px } ');

Working sample

Answer 3

如果您想添加规则，而不是直接编辑每个元素的样式，则可以使用CSSStyleSheet.insertRule()。它需要两个参数：规则作为字符串，以及插入规则的位置。

以上链接中的示例：

// push a new rule onto the top of my stylesheet
myStyle.insertRule("#blanc { color: white }", 0);

在这种情况下，myStyle是.sheet元素的style成员。

据我所知，style元素必须先插入到文档中，然后才能抓住其工作表，而且它不能是外部工作表。您也可以从document.styleSheets抓取一张表，例如

var myStyle = document.styleSheets[1]; // Must not be a linked sheet.
myStyle.insertRule("#blanc { color: white }", 0);

注意：页面建议通过更改类来修改元素，而不是修改规则。

动态更改JavaScript或jQuery中的CSS规则

3 个答案:

的 Working sample

注意

Working sample