Question

要在样式表中创建新的CSS规则，截至目前，我只知道.insertRule()（不包括非标准方式）。

还有其他方法可以创建更多CSS规则吗？东西，例如：
警告：这不是标准，只是显示意图的示例

var rule = new CSSStyleRule();
rule.selectorText = '.selector';
rule.style.display = 'block';
rule.style.color = 'red';
ruleSet.append(rule);

任何像上面这样的东西都可以作为答案。而不是new，可能是document.createCssRule()或stylesheet.createCssRule() ... 我只是这对我正在开发的一个软件很有用，如果在这样的界面中以编程的方式修改值，那么添加新东西并不局限于解析的字符串。

请在回答时担心IE9及以下版本。

注意：（取消关闭）这不是关于如何查找和修改当前的CSS规则，而是在不使用.insertRule()没有的文本解析器的情况下创建新规则构建像.insertRule()这样的完整CSS字符串。

Answer 1

您可以添加空规则，获取并修改它：

function appendRule(sheet) {
  var len = sheet.cssRules.length;
  sheet.insertRule('*{}', len);
  return sheet.cssRules[len];
}
var rule = appendRule(document.styleSheets[0]);
rule.selectorText = '.selector';
rule.style.display = 'block';
rule.style.color = 'red';

<span class="selector">I should become red.</span>
<span>I should be at the next line and not become red.</span>

但是，修改selectorText似乎不适用于Firefox。

Answer 2

您可以向f添加新的style元素，只需向其附加规则：

head

然后在想要添加规则时调用您的函数：

function addStyle(newRules){
    if(document.getElementById("jsAddedRules")){
        document.getElementById("jsAddedRules").innerHTML+=newRules;
    }else{
        var style=document.createElement("style");
        style.setAttribure("id","jsAddedRules");
        style.innerHTML=newRules;
        document.getElementsByTagName("head")[0].appendChild(style);
    }
}

以编程方式在样式表中创建新的CSS规则

2 个答案: