js中巧用cssText屬性批量操作樣式

更新時間：2011年03月13日 23:33:21 作者：

js中巧用cssText屬性批量操作樣式，需要的朋友可以參考下。

給一個HTML元素設(shè)置css屬性，如

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

 
var head= document.getElementById("head"); 
head.style.width = "200px"; 
head.style.height = "70px"; 
head.style.display = "block"; 

這樣寫太羅嗦了，為了簡單些寫個工具函數(shù)，如

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

 
function setStyle(obj,css){ 
for(var atr in css){ 
obj.style[atr] = css[atr]; 
} 
} 
var head= document.getElementById("head"); 
setStyle(head,{width:"200px",height:"70px",display:"block"}) 

發(fā)現(xiàn) Google API 中使用了cssText屬性，后在各瀏覽器中測試都通過了。一行代碼即可，實(shí)在很妙。如

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

 
var head= document.getElementById("head"); 
head.style.cssText="width:200px;height:70px;display:bolck"; 

和innerHTML一樣，cssText很快捷且所有瀏覽器都支持。此外當(dāng)批量操作樣式時，cssText只需一次reflow，提高了頁面渲染性能。

但cssText也有個缺點(diǎn)，會覆蓋之前的樣式。如

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

想給該div在添加個css屬性width

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

div.style.cssText = "width:200px;";

這時雖然width應(yīng)用上了，但之前的color被覆蓋丟失了。因此使用cssText時應(yīng)該采用疊加的方式以保留原有的樣式。

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

 
function setStyle(el, strCss){ 
var sty = el.style; 
sty.cssText = sty.cssText + strCss; 
} 

使用該方法在IE9/Firefox/Safari/Chrome/Opera中沒什么問題，但由于 IE6/7/8中cssText返回值少了分號會讓你失望。

因此對IE6/7/8還需單獨(dú)處理下，如果cssText返回值沒";"則補(bǔ)上

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

function setStyle(el, strCss){ 
function endsWith(str, suffix) { 
var l = str.length - suffix.length; 
return l >= 0 && str.indexOf(suffix, l) == l; 
} 
var sty = el.style, 
cssText = sty.cssText; 
if(!endsWith(cssText, ';')){ 
cssText += ';'; 
} 
sty.cssText = cssText + strCss; 
} 