javascript - 用户在 CSS 中插入规则

Question

我想让用户通过从下拉列表中选择属性来更改站点的样式。当选择一个元素时，一个函数会将规则插入到 CSS 中。我认为它的 JavaScript 代码类似于:

var sheet = document.styleSheets[];
sheet.insertRule(rule,index);

但我无法让它工作。首先，该函数应检查特定样式规则是否已经存在值。如果是这样，它应该在添加新规则之前删除规则。所以如果它试图在索引 1 上添加 16 的字体大小并且已经有一个字体大小它应该覆盖它，否则它应该只添加规则......

Answer 1

document.styleSheets 返回一个 StyleSheetList - 样式表列表而不是特定样式表，而 insertRule 是 的方法CSS样式表。要使用此方法，您必须从列表中选择一个特定的样式表。

看看second example here .他们使用 document.createElement 创建了一个新的样式表，将其添加到头部，然后将新规则插入到该样式表中。像这样:

var styleElem = document.createElement('style');
document.head.appendChild(styleElem);
styleElem.sheet.insertRule( ... );

检查现有规则更加困难，因为您必须遍历每个工作表和规则以查明是否已经有匹配新规则的规则。

大多数时候浏览器会采用它看到的最后一条规则并覆盖之前的规则(除非它有 !important 关键字)。