更新时间:2022-02-11 09:31:20
关于页面动态创建大段内联CSS样式,以及可能遇到的问题,已经有很多先烈们进行了总结,比如三生石兄的文章:怪异的IE - 2 ,这里不赘言,仅做备忘。
其实还有疑问:styleSheetNode.innerHTML = str 是否在除了IE之外的浏览器都支持
直接上demo以及代码:
.red{color:red;}
<p class="red green">这是我看过的最牛B的文字,点击下面的按钮就可以变绿!</p>
<button onclick="addStyle()">猛点击</button>
<h3>通过以下浏览器测试</h3>
<ol>
<li>IE9/8/7/6</li>
<li>chrome23</li>
<li>firefox16</li>
<li>safari 6</li>
</ol>
function $(id){ return document.getElementById(id); }
function addStyle(){
var s = document.createElement('style');
s.setAttribute('type', 'text/css');
var str = '.green{color: green;}';
if(s.styleSheet){
s.styleSheet.cssText = str;
}else{
s.innerHTML = str;
}
document.getElementsByTagName('head')[0].appendChild(s);
}
比较诡异的问题,尚未深究:
var s = document.createStyleSheet();
s.setAttribute('type', 'text/css'); //报错,因为没有setAttribute方法
s.styleSheet.cssText = 'p{color: green;}'; //报错,因为不存在styleSheet属性