如何将类添加到特定样式表？

Question

我想使用CSSStyleSheet.insertRule()在特定样式表中插入一个新类。例如，该样式表的id为“customStylesheet”。

This page说“还可以从其所有者对象（Node或CSSImportRule）访问特定样式表（如果有）。”但是，我无法弄清楚如何访问该特定样式表。

Answer 1

这是相当直接的。

var sheet = document.getElementById('customStylesheet').sheet;

sheet.insertRule('.someclass {display: none;}'); // was missing a ' here

这是fiddle显示正常工作。我已经更新了小提琴，以显示它在头部的样式标签上工作。

Answer 2

这可以在没有jQuery的情况下完成。假设您希望将课程purpleText设置为color: purple。首先，您将使用document.styleSheets[_index_].ownerNode.sheet获取样式表。接下来，使用insertRule()方法。该参数只是一个包含CSS代码的字符串，如".purpleText{color: purple}"中所示。因此，对于第一个样式表，整个命令将是document.styleSheets[0].ownerNode.sheet.insertRule(".purpleText{color: purple}");

Answer 3

要按ID获取样式表，请使用：

document.getElementById('stylesheet').sheet;