如何用Javascript创建一个<style>标签
我正在寻找一种将<style>标签插入到带有JavaScript的HTML页面中的方法。
迄今为止我发现的最佳方式是：
var divNode = document.createElement("div");
divNode.innerHTML = "<br><style>h1 { background: red; }</style>";
document.body.appendChild(divNode);
这适用于Firefox，Opera和Internet Explorer，但不适用于Google Chrome。 此外，它是一个有点难看与<br>前面的IE浏览器。
有谁知道创建<style>标签的方法
更好
适用于Chrome？
或者可能
这是我应该避免的非标准事情
三个工作的浏览器是伟大的，谁使用Chrome呢？
尝试将style元素添加到head而不是body 。
这在IE（7-9），Firefox，Opera和Chrome中进行了测试：
var css = 'h1 { background: red; }',
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
下面是一个脚本，它向不具有它们的浏览器添加了IE风格的createStyleSheet()和addRule()方法：
if(typeof document.createStyleSheet === 'undefined') {
document.createStyleSheet = (function() {
function createStyleSheet(href) {
if(typeof href !== 'undefined') {
var element = document.createElement('link');
element.type = 'text/css';
element.rel = 'stylesheet';
element.href = href;
}
else {
var element = document.createElement('style');
element.type = 'text/css';
}
document.getElementsByTagName('head')[0].appendChild(element);
var sheet = document.styleSheets[document.styleSheets.length - 1];
if(typeof sheet.addRule === 'undefined')
sheet.addRule = addRule;
if(typeof sheet.removeRule === 'undefined')
sheet.removeRule = sheet.deleteRule;
return sheet;
}
function addRule(selectorText, cssText, index) {
if(typeof index === 'undefined')
index = this.cssRules.length;
this.insertRule(selectorText + ' {' + cssText + '}', index);
}
return createStyleSheet;
})();
}
您可以通过添加外部文件
document.createStyleSheet('foo.css');
并通过动态创建规则
var sheet = document.createStyleSheet();
sheet.addRule('h1', 'background: red;');
我假设你想插入一个style标签和一个link标签（引用一个外部CSS），所以这就是下面的例子：
<html>
<head>
<title>Example Page</title>
</head>
<body>
<span>
This is styled dynamically via JavaScript.
</span>
</body>
<script type="text/javascript">
var styleNode = document.createElement('style');
styleNode.type = "text/css";
// browser detection (based on prototype.js)
if(!!(window.attachEvent && !window.opera)) {
styleNode.styleSheet.cssText = 'span { color: rgb(255, 0, 0); }';
} else {
var styleText = document.createTextNode('span { color: rgb(255, 0, 0); } ');
styleNode.appendChild(styleText);
}
document.getElementsByTagName('head')[0].appendChild(styleNode);
</script>
</html>
另外，我在你的问题中注意到你正在使用innerHTML 。 这实际上是将数据插入页面的非标准方式。 最佳做法是创建一个文本节点并将其附加到另一个元素节点。
关于你的最终问题，你会听到一些人说你的工作应该适用于所有的浏览器。 这一切都取决于你的观众。 如果你的听众中没有人使用Chrome，那么不要为此付出汗水; 但是，如果您希望能够覆盖最大的受众群体，那么最好支持所有主流的A级浏览器
链接地址: http://www.djcxy.com/p/88107.html