巧用cssText屬性批量操作樣式

給乙個html元素設定css屬性，如12

34varhead= document.getelementbyid("head");

head.style.width ="200px";

head.style.height ="70px";

head.style.display ="block";

這樣寫太羅嗦了，為了簡單些寫個工具函式，如12

3456

7functionsetstyle(obj,css)

}

varhead= document.getelementbyid("head");

setstyle(head,)

發現 google api 中使用了csstext屬性，後在各瀏覽器中測試都通過了。一行**即可，實在很妙。如12

varhead= document.getelementbyid("head");

head.style.csstext="width:200px;height:70px;display:bolck";

和innerhtml一樣，csstext很快捷且所有瀏覽器都支援。此外當批量操作樣式時，csstext只需一次reflow，提高了頁面渲染效能。

但csstext也有個缺點，會覆蓋之前的樣式。如

1<divstyle="color:red;">test

想給該div在新增個css屬性width

1div.style.csstext = "width:200px;";

這時雖然width應用上了，但之前的color被覆蓋丟失了。因此使用csstext時應該採用疊加的方式以保留原有的樣式。12

34functionsetstyle(el, strcss)

使用該方法在ie9/firefox/safari/chrome/opera中沒什麼問題，但由於 ie6/7/8中csstext返回值少了分號 會讓你失望。

因此對ie6/7/8還需單獨處理下，如果csstext返回值沒";"則補上12

3456

78910

1112

functionsetstyle(el, strcss)

varsty = el.style,

csstext = sty.csstext;

if(!endswith(csstext,';'))

sty.csstext = csstext + strcss;

}

巧用cssText屬性批量操作樣式

給乙個html元素設定css屬性 var d document.getelementbyid container d.style.height 7px d.style.weight 17px 和innerhtml一樣，csstext很快捷且所有瀏覽器都支援。一組樣式屬性及其值的文字表示。將文字格式化...

JS 巧用cssText屬性 操作樣式

給乙個html元素設定css屬性,傳統做法 varmybox document.getelementbyid mybox mybox.style.width 200px mybox.style.height 70px mybox.style.display block 這樣寫很煩，尤其是很多的時候，...

css text文字屬性（三）

1.text decoration屬性 作用 設定文字修飾線。取值 text decoration line 不支援 指定文字裝飾的種類。相當於 css1 時的text decoration屬性 text decoration style 不支援 指定文字裝飾的樣式。text decoration ...