【經驗總結】頁面動態建立內聯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屬性