您如何strong { color: red }
使用 Javascript添加 CSS 规则(例如)?
你如何使用 Javascript 添加 CSS?
IT技术
javascript
css
2021-01-12 19:56:54
6个回答
简单直接的方法是创建一个新style
节点并将其添加到文档中。
// Your CSS as text
var styles = `
.qwebirc-qui .ircwindow div {
font-family: Georgia,Cambria,"Times New Roman",Times,serif;
margin: 26px auto 0 auto;
max-width: 650px;
}
.qwebirc-qui .lines {
font-size: 18px;
line-height: 1.58;
letter-spacing: -.004em;
}
.qwebirc-qui .nicklist a {
margin: 6px;
}
`
var styleSheet = document.createElement("style")
styleSheet.type = "text/css"
styleSheet.innerText = styles
document.head.appendChild(styleSheet)
你也可以使用 DOM Level 2 CSS 接口 ( MDN )来做到这一点:
var sheet = window.document.styleSheets[0];
sheet.insertRule('strong { color: red; }', sheet.cssRules.length);
...除了(自然地)IE8 和之前的版本,它使用自己的略有不同的措辞:
sheet.addRule('strong', 'color: red;', -1);
与 createElement-set-innerHTML 方法相比,这有一个理论上的优势,因为您不必担心在 innerHTML 中放置特殊的 HTML 字符,但实际上样式元素在旧 HTML 中是 CDATA,并且 '<'无论如何,'&' 在样式表中很少使用。
在开始像这样附加到它之前,您确实需要一个样式表。这可以是任何现有的活动样式表:外部的、嵌入的或空的,这无关紧要。如果没有,目前创建它的唯一标准方法是使用 createElement。
Ben Blank 的解决方案在 IE8 中对我不起作用。
但是这在 IE8 中确实有效
function addCss(cssCode) {
var styleElement = document.createElement("style");
styleElement.type = "text/css";
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = cssCode;
} else {
styleElement.appendChild(document.createTextNode(cssCode));
}
document.getElementsByTagName("head")[0].appendChild(styleElement);
}
这是Chris Herring 解决方案的略微更新版本,考虑到您也可以使用innerHTML
,而不是创建新的文本节点:
function insertCss( code ) {
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
// IE
style.styleSheet.cssText = code;
} else {
// Other browsers
style.innerHTML = code;
}
document.getElementsByTagName("head")[0].appendChild( style );
}
最短的一个班轮
// One liner function:
const addCSS = s => document.head.appendChild(document.createElement("style")).innerHTML=s;
// Usage:
addCSS("body{ background:red; }")
其它你可能感兴趣的问题