快捷導(dǎo)航

javascript插入樣式實(shí)現(xiàn)代碼

更新時(shí)間：2012年02月22日 16:38:54 作者：

最近做一個(gè)項(xiàng)目，需要javascript動(dòng)態(tài)插入樣式，結(jié)果以前的方法失效了！查了2個(gè)小時(shí)的原因竟然是自己手賤，這個(gè)最后再說(shuō)

javascript插入樣式在前端開(kāi)發(fā)中應(yīng)用比較廣泛，特別是在修改前端表現(xiàn)和頁(yè)面換膚的時(shí)候。最近做的這個(gè)任務(wù)是用戶在別人的站點(diǎn)上點(diǎn)擊一個(gè)按鈕，就會(huì)在別的站點(diǎn)頁(yè)面下插入一個(gè)腳本，執(zhí)行，這其中包含了樣式的插入。

一般情況下javascript動(dòng)態(tài)插入樣式有兩種，一種頁(yè)面中引入外部樣式,在<head>中使用<link>標(biāo)簽引入一個(gè)外部樣式文件，另一種是在頁(yè)面中使用<style>標(biāo)簽插入頁(yè)面樣式（這里說(shuō)的不是style屬性）。
一、頁(yè)面中引入外部樣式：
在<head>中使用<link>標(biāo)簽引入一個(gè)外部樣式文件，這個(gè)比較簡(jiǎn)單，各個(gè)主流瀏覽器也不存在兼容性問(wèn)題：

復(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.jb51.net/home/css/reset.css?v=20101227"); 

但是在我目前做的這個(gè)項(xiàng)目中本身應(yīng)用的樣式非常少，直接用引入一個(gè)外部樣式文件似乎不合適，所以我選擇了第二種方案，在頁(yè)面中使用<style>標(biāo)簽插入頁(yè)面樣式。
二、使用<style>標(biāo)簽插入頁(yè)面樣式：
這種方式在各個(gè)主流瀏覽器存在兼容性問(wèn)題，像firefox等標(biāo)準(zhǔn)瀏覽器無(wú)法直接獲取設(shè)置styleSheet的cssText值，標(biāo)準(zhǔn)瀏覽器下只能使用document.styleSheets[0].cssRules[0].cssText單個(gè)獲取樣式；同時(shí)使用：document.styleSheets[0].cssRules[0].cssText=newcssText；頁(yè)面不會(huì)自動(dòng)更新樣式，必須使用：document.styleSheets[0].cssRules[0].style.cssText=newcssText；這點(diǎn)似乎沒(méi)坑爹的IE來(lái)的人性化和簡(jiǎn)便。YUI中使用了一個(gè)很好的辦法：style.appendChild(document.createTextNode(styles));采用createTextNode將樣式字符串添加到<style>標(biāo)簽內(nèi)；

復(fù)制代碼代碼如下:

 
function&nbsp;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è)面中的元素就能直接應(yīng)用樣式了，不管你的這些元素是不是通過(guò)腳本追加的。
關(guān)于手賤：
看這段代碼：

復(fù)制代碼代碼如下:

 
var divObj = document.createElement("div"); 
divObj&nbsp;.id = "__div"; 
divObj&nbsp;.innerHTML="測(cè)試js插入DOM和樣式"; 
document.body.appendChild(divObj&nbsp;); 
var styles = "#__div{background-color: #FF3300; color:#FFFFFF }"; 
includeStyleElement(styles,"newstyle"); 

前面說(shuō)了這個(gè)項(xiàng)目是用戶在別人的站點(diǎn)上點(diǎn)擊一個(gè)按鈕，就會(huì)在別的站點(diǎn)頁(yè)面下插入一個(gè)腳本，執(zhí)行，這其中包含了樣式的插入，我為了盡可能的保證我創(chuàng)建的元素ID唯一性，手賤在元素ID前加了“__”,表示私有防止沖突。結(jié)果悲劇了，IE6，IE7 class和id的命名不能以下劃線開(kāi)頭（“_”），竟然把這個(gè)給忘了！花了兩個(gè)小時(shí)才找到原因。悲劇?。〉贸鲆粋€(gè)結(jié)論！

您可能感興趣的文章: