通过JavaScript改变<style>元素的内容

Question

Answer 1

动态生成 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>

Answer 2

今天，在所有浏览器（包括我相信 IE9+）中，您可以在

textContent

元素上设置

style

的值，它会按照您想要的方式工作，包括选择器中的

。

Answer 3

在设置风格上，

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>

通过JavaScript改变<style>元素的内容

问题描述投票：0回答：3

3个回答

最新问题

通过JavaScript改变<style>元素的内容

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3