动态生成 CSS 有其优势。如果您想在 IE 中设置样式元素的 innerHTML,请使用 styleSheet.cssText。例如:http://jsbin.com/awecu4
<!doctype html>
<script>
var style = document.createElement('style'),
script = document.getElementsByTagName('script')[0],
styles = '#test{background:green;}';
script.parentNode.insertBefore(style, script);
try{style.innerHTML = styles;}
//IE fix
catch(error){style.styleSheet.cssText = styles;}
</script>
<div id=test>Div with id of test</div>
今天,在所有浏览器(包括我相信 IE9+)中,您可以在
textContent
元素上设置 style
的值,它会按照您想要的方式工作,包括选择器中的 >
。
在设置风格上,
CSSStyleSheet.replaceSync()
方法管用。还有.insertRule
。如果您想从更大的字符串中插入,只需执行const mystylesheet = new CSSStyleSheet(".myClass{color:"green" ...}");
const stylesheet = new CSSStyleSheet();
stylesheet.replaceSync("h1 { color: blue; }");
document.adoptedStyleSheets = [stylesheet];
h1 { color: red; }
<h1>Hello World</h1>