用户在CSS中插入规则

Question

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

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

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

Answer 1

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

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

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

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

大多数情况下，浏览器会采用它看到的最后一条规则并覆盖之前的规则（除非它具有!important关键字）。

Answer 2

如果我理解你的问题是正确的...为什么不尝试使用jQuery来修改你网站的CSS或特定元素呢？

<强>的CSS（{ “PROPERTYNAME”： “值”， “PROPERTYNAME”： “值”，...}）;

示例：

**

<td> $Favorite_Drink</td>

**