Question

如何在此CSS样式表中添加新规则？

.tag {
  background: #333333;
  border-radius: 3px;
  color: #ffffff;
  font: 10px "Gibson-Regular", sans-serif;
  letter-spacing: 1px;
  margin-right: 1px;
  padding: 2px 3px 2px 4px;
  position: relative;
  top: -1px;
  text-transform: uppercase; 
}

.tag a {
  color: #ffffff;
  text-decoration: none !important; 
}

// already in the code
.tag.yolo {
  background-color: #0066CC; 
}

// I want this to be added
.tag.yolo {
  background-color: #0066CC; 
}

我更喜欢只使用Javascript

.tag.yolo {
  background-color: #0066CC; 
}

Answer 1

使用上面评论的问题引用的API，您可以这样做：

var all = document.styleSheets,
    s = all[all.length - 1],
    l = s.cssRules.length;

if (s.insertRule) {
    s.insertRule('.tag.yolo { background-color: #0066CC; }', l);
} else {
    //IE
    s.addRule('.tag.yolo { background-color: #0066CC; }', -1);
}

或者这种方法：

var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".tag.yolo { background-color: #0066CC; }";
document.body.appendChild(css);

如何将自己的行添加到CSS片段中

1 个答案: