最近做一個項目，需要javascript動態插入樣式，結果以前的方法失效了！查了2小時的原因竟然是自己手賤，這個最後再說！ javascript插入樣式在前端開發中應用比較廣泛，特別是在修改前端表現和頁面換膚的時候。最近做的這個任務是使用者在別人的網站上點擊一個按鈕，就會在別的網站頁面下插入一個腳本，執行，這其中包含了樣式的插入。 一般情況下javascript動態插入樣式有兩種，一種頁面中引入外部樣式,在中使用標籤引入一個外部樣式文件，另一種是在頁面中使用標籤插入頁面樣式（這裡說的不是style屬性）。 <P><STRONG>一、頁中引入外部樣式： <P>在<head>使用<link>標籤引入一個外部樣式文件，這個比較簡單，各個主流瀏覽器也不存在相容性問題： <P><div class="codetitle"><span><a style="CURSOR: pointer" data="89217" class="copybut" id="copybut89217" onclick="doCopy('code89217')"><U>複製程式碼 程式碼如下:<div class="codebody" id="code89217"> <P>function includeLinkStyle(url) {<BR> var link = document.createElement("link");<BR> link.rel = "stylesheet";<BR> link.type = "text/css";<BR> link.href = url;<BR> document.getElementsByTagName("head")[0].appendChild(link);<BR>} <P>includeLinkStyle("http://css.jb51.net/home/css/reset.css?v=20101227"); <P> <P>但是在我目前做的這個項目中本身應用的樣式非常少，直接用引入一個外部樣式文件似乎不合適，所以我選擇了第二種方案，在頁面中使用<style>標籤插入頁面樣式。 <P><STRONG>二、使用<style>標籤插入頁面樣式： <P>這種方式在各個主流瀏覽器有相容性問題，像firefox等標準瀏覽器無法直接取得設定styleSheet的cssText值，標準瀏覽器下只能使用document.styleSheets[0].cssRules[0]. cssText單一取得樣式；同時使用：document.styleSheets[0].cssRules[0].cssText=newcssText；頁面不會自動更新樣式，必須使用：document.styleSheets[0].cssRules[0].style.cssText= newcssText；這點似乎沒坑爹的IE來的人性化和簡單。 YUI中使用了一個很好的方法：style.appendChild(document.createTextNode(styles));採用createTextNode將樣式字串加入<style>標籤內； <P><div class="codetitle"><span><a style="CURSOR: pointer" data="80931" class="copybut" id="copybut80931" onclick="doCopy('code80931')"><U>複製程式碼 程式碼如下:<div class="codebody" id="code80931"> <P>function includeStyleElement(styles, styleId) { <P> if (document.getElementById(styleId)) {<BR> return<BR> }<BR> . //這裡最好給ie設定下面的屬性<BR> /*if (isIE()) {<BR>style.type = "text/css";<BR>style.media = "screen"<BR>}*/ <BR> (document.getElementsByTagName("head")[0] || document.body).appendChild(style);<BR> if (style. styles;<BR> } else { //for w3c<BR> } else { //for w3c<BR> } else { //for w3c<BR> FF3300; color:#FFFFFF }";<BR>includeStyleElement(styles, "newstyle");<BR> <BR><BR><BR> 這樣頁面中的元素就能直接套用樣式了，不管你的這些元素是不是透過腳本追加的。 <P> 關於手賤：<P> <P>看這段程式碼：<STRONG> <P><P>複製程式碼<div class="codetitle"><span><a style="CURSOR: pointer" data="58905" class="copybut" id="copybut58905" onclick="doCopy('code58905')"> 程式碼如下:<U> var divObj = document.createElement("div");divObj.id = "__div";<div class="codebody" id="code58905">divObj.innerHTML = "測試js插入DOM和樣式";document.body.appendChildent.body.append (divObj);<P> <BR>var styles = "#__div{background-color: #FF3300; color:#FFFFFF }";<BR>includeStyleElement(styles, "newstyle");<BR> <P> <P>前面說了這個項目是用戶在別人的網站上點擊一個按鈕，就會在別的網站頁面下插入一個腳本，執行，這其中包含了樣式的插入，我為了盡可能的保證我創建的元素ID唯一性，手賤在元素ID前面加了「__」,表示私有防止衝突。結果悲劇了，IE6，IE7 class和id的命名不能以下劃線開頭（「_」），竟然把這個給忘了！花了兩個小時才找到原因。悲劇啊！得出一個結論！做前端千萬不能手賤！
