js中巧用cssText屬性批量操作樣式
更新時(shí)間：2011年03月13日 23:33:21 作者：
js中巧用cssText屬性批量操作樣式，需要的朋友可以參考下。
給一個(gè)HTML元素設(shè)置css屬性，如
var head= document.getElementById("head");
head.style.width = "200px";
head.style.height = "70px";
head.style.display = "block";
這樣寫(xiě)太羅嗦了，為了簡(jiǎn)單些寫(xiě)個(gè)工具函數(shù)，如
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屬性，后在各瀏覽器中測(cè)試都通過(guò)了。一行代碼即可，實(shí)在很妙。如
var head= document.getElementById("head");
head.style.cssText="width:200px;height:70px;display:bolck";
和innerHTML一樣，cssText很快捷且所有瀏覽器都支持。此外當(dāng)批量操作樣式時(shí)，cssText只需一次reflow，提高了頁(yè)面渲染性能。
但cssText也有個(gè)缺點(diǎn)，會(huì)覆蓋之前的樣式。如
<div style="color:red;">TEST</div>
想給該div在添加個(gè)css屬性width
div.style.cssText = "width:200px;";
這時(shí)雖然width應(yīng)用上了，但之前的color被覆蓋丟失了。因此使用cssText時(shí)應(yīng)該采用疊加的方式以保留原有的樣式。
function setStyle(el, strCss){
var sty = el.style;
sty.cssText = sty.cssText + strCss;
}
使用該方法在IE9/Firefox/Safari/Chrome/Opera中沒(méi)什么問(wèn)題，但由于 IE6/7/8中cssText返回值少了分號(hào) 會(huì)讓你失望。
因此對(duì)IE6/7/8還需單獨(dú)處理下，如果cssText返回值沒(méi)";"則補(bǔ)上
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;
}
復(fù)制代碼 代碼如下:
var head= document.getElementById("head");
head.style.width = "200px";
head.style.height = "70px";
head.style.display = "block";
這樣寫(xiě)太羅嗦了，為了簡(jiǎn)單些寫(xiě)個(gè)工具函數(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屬性，后在各瀏覽器中測(cè)試都通過(guò)了。一行代碼即可，實(shí)在很妙。如
復(fù)制代碼 代碼如下:
var head= document.getElementById("head");
head.style.cssText="width:200px;height:70px;display:bolck";
和innerHTML一樣，cssText很快捷且所有瀏覽器都支持。此外當(dāng)批量操作樣式時(shí)，cssText只需一次reflow，提高了頁(yè)面渲染性能。
但cssText也有個(gè)缺點(diǎn)，會(huì)覆蓋之前的樣式。如
復(fù)制代碼 代碼如下:
<div style="color:red;">TEST</div>
想給該div在添加個(gè)css屬性width
復(fù)制代碼 代碼如下:
div.style.cssText = "width:200px;";
這時(shí)雖然width應(yīng)用上了，但之前的color被覆蓋丟失了。因此使用cssText時(shí)應(yīng)該采用疊加的方式以保留原有的樣式。
復(fù)制代碼 代碼如下:
function setStyle(el, strCss){
var sty = el.style;
sty.cssText = sty.cssText + strCss;
}
使用該方法在IE9/Firefox/Safari/Chrome/Opera中沒(méi)什么問(wèn)題，但由于 IE6/7/8中cssText返回值少了分號(hào) 會(huì)讓你失望。
因此對(duì)IE6/7/8還需單獨(dú)處理下，如果cssText返回值沒(méi)";"則補(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;
}
相關(guān)：
http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration
https://developer.mozilla.org/en/DOM/CSSStyleDeclaration
相關(guān)文章
解決Layui中l(wèi)ayer報(bào)錯(cuò)的問(wèn)題
今天小編就為大家分享一篇解決Layui中l(wèi)ayer報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
js寫(xiě)一個(gè)彈出層并鎖屏效果實(shí)現(xiàn)代碼
js實(shí)現(xiàn)一個(gè)彈出層并鎖屏效果是每一網(wǎng)友所期望的效果，于是搜集整理一番，把代碼曬出來(lái)和大家分享2012-12-12
這篇文章主要介紹了Javascript監(jiān)視變量變化的方法,涉及javascript針對(duì)變量的相關(guān)操作技巧,需要的朋友可以參考下2015-06-06
本文主要介紹了JS跳過(guò)debugger的幾種方法小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要介紹了手把手15分鐘搭一個(gè)企業(yè)級(jí)腳手架，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
正則表達(dá)式使用單個(gè)字符串來(lái)描述、匹配一系列符合某個(gè)句法規(guī)則的字符串搜索模式,這篇文章主要給大家介紹了關(guān)于徹底搞懂JavaScript正則表達(dá)式的相關(guān)資料,需要的朋友可以參考下2022-09-09
本文給大家分享一段js代碼實(shí)現(xiàn)搜索框文字可刪除功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2016-12-12
分割字符串的方法有很多，下面為大家介紹下使用JScript簡(jiǎn)單實(shí)現(xiàn)下，喜歡的朋友可以參考下2013-09-09
Ionic 是目前最有潛力的一款 HTML5 手機(jī)應(yīng)用開(kāi)發(fā)框架。通過(guò) SASS 構(gòu)建應(yīng)用程序，它 提供了很多 UI 組件來(lái)幫助開(kāi)發(fā)者開(kāi)發(fā)強(qiáng)大的應(yīng)用。接下來(lái)小編給大家介紹如何安裝 Ionic 在自己的電腦上搭建一個(gè)簡(jiǎn)單的小應(yīng)用，感興趣的朋友一起看看吧2016-06-06
js實(shí)現(xiàn)頁(yè)面轉(zhuǎn)發(fā)功能示例代碼
本文為大家介紹的是使用js實(shí)現(xiàn)頁(yè)面轉(zhuǎn)發(fā)，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-08-08