【经验总结】页面动态创建内联CSS样式

关于页面动态创建大段内联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属性