最近做一個項目，需要javascript動態(tài)插入樣式，結(jié)果以前的方法失效了！查了2個小時的原因竟然是自己手賤，這個最后再說！
javascript插入樣式在前端開發(fā)中應(yīng)用比較廣泛，特別是在修改前端表現(xiàn)和頁面換膚的時候。最近做的這個任務(wù)是用戶在別人的站點上點擊一個按鈕，就會在別的站點頁面下插入一個腳本，執(zhí)行，這其中包含了樣式的插入。
一般情況下javascript動態(tài)插入樣式有兩種，一種頁面中引入外部樣式,在<head>中使用<link>標(biāo)簽引入一個外部樣式文件，另一種是在頁面中使用<style>標(biāo)簽插入頁面樣式（這里說的不是style屬性）。
一、頁面中引入外部樣式：
在<head>中使用<link>標(biāo)簽引入一個外部樣式文件，這個比較簡單，各個主流瀏覽器也不存在兼容性問題：
復(fù)制代碼 代碼如下:
function includeLinkStyle(url) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
}
includeLinkStyle("http://css.vevb.com/home/css/reset.css?v=20101227");
但是在我目前做的這個項目中本身應(yīng)用的樣式非常少，直接用引入一個外部樣式文件似乎不合適，所以我選擇了第二種方案，在頁面中使用<style>標(biāo)簽插入頁面樣式。
二、使用<style>標(biāo)簽插入頁面樣式：
這種方式在各個主流瀏覽器存在兼容性問題，像firefox等標(biāo)準(zhǔn)瀏覽器無法直接獲取設(shè)置styleSheet的cssText值，標(biāo)準(zhǔn)瀏覽器下只能使用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>標(biāo)簽內(nèi)；
復(fù)制代碼 代碼如下:
function includeStyleElement(styles, styleId) {
if (document.getElementById(styleId)) {
return
}
var style = document.createElement("style");
style.id = styleId;
//這里最好給ie設(shè)置下面的屬性
/*if (isIE()) {
style.type = "text/css";
style.media = "screen"
}*/
(document.getElementsByTagName("head")[0] || document.body).appendChild(style);
if (style.styleSheet) { //for ie
style.styleSheet.cssText = styles;
} else { //for w3c
style.appendChild(document.createTextNode(styles));
}
}
var styles = "#div{background-color: #FF3300; color:#FFFFFF }";
includeStyleElement(styles, "newstyle");
這樣頁面中的元素就能直接應(yīng)用樣式了，不管你的這些元素是不是通過腳本追加的。
關(guān)于手賤：
看這段代碼：
復(fù)制代碼 代碼如下:
var divObj = document.createElement("div");
divObj.id = "__div";
divObj.innerHTML = "測試js插入DOM和樣式";
document.body.appendChild(divObj);
var styles = "#__div{background-color: #FF3300; color:#FFFFFF }";
includeStyleElement(styles, "newstyle");
前面說了這個項目是用戶在別人的站點上點擊一個按鈕，就會在別的站點頁面下插入一個腳本，執(zhí)行，這其中包含了樣式的插入，我為了盡可能的保證我創(chuàng)建的元素ID唯一性，手賤在元素ID前加了“__”,表示私有防止沖突。結(jié)果悲劇了，IE6，IE7 class和id的命名不能以下劃線開頭（“_”），竟然把這個給忘了！花了兩個小時才找到原因。悲劇啊！得出一個結(jié)論！做前端千萬不能手賤！
新聞熱點
疑難解答
圖片精選
