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

Question

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

这是一个例子：

.red{
    color:red;
}

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

.red{
    color:purple;
}

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

我希望我说清楚。

Answer 1

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

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

对于多个规则：

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

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

Working sample

Note

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

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

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

并供将来使用：

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

Working sample

Answer 2

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

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

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);

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