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

Question

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

这是一个例子：

.red{
    color:red;
}

所以想法是在 JavaScript 中做一些事情，HTML 知道现在 color 是另一种颜色，如下所示：

.red{
    color:purple;
}

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

我希望我说清楚了。

Answer 1

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

来自上述链接的示例：

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

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

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

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

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

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

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

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