js中巧用cssText屬性批量操作樣式
更新時間：2011年03月13日 23:33:21 作者：
js中巧用cssText屬性批量操作樣式，需要的朋友可以參考下。
給一個HTML元素設置css屬性，如
var head= document.getElementById("head");
head.style.width = "200px";
head.style.height = "70px";
head.style.display = "block";
這樣寫太羅嗦了，為了簡單些寫個工具函數(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屬性，后在各瀏覽器中測試都通過了。一行代碼即可，實在很妙。如
var head= document.getElementById("head");
head.style.cssText="width:200px;height:70px;display:bolck";
和innerHTML一樣，cssText很快捷且所有瀏覽器都支持。此外當批量操作樣式時，cssText只需一次reflow，提高了頁面渲染性能。
但cssText也有個缺點，會覆蓋之前的樣式。如
<div style="color:red;">TEST</div>
想給該div在添加個css屬性width
div.style.cssText = "width:200px;";
這時雖然width應用上了，但之前的color被覆蓋丟失了。因此使用cssText時應該采用疊加的方式以保留原有的樣式。
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還需單獨處理下，如果cssText返回值沒";"則補上
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;
}
復制代碼 代碼如下:
var head= document.getElementById("head");
head.style.width = "200px";
head.style.height = "70px";
head.style.display = "block";
這樣寫太羅嗦了，為了簡單些寫個工具函數(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屬性，后在各瀏覽器中測試都通過了。一行代碼即可，實在很妙。如
復制代碼 代碼如下:
var head= document.getElementById("head");
head.style.cssText="width:200px;height:70px;display:bolck";
和innerHTML一樣，cssText很快捷且所有瀏覽器都支持。此外當批量操作樣式時，cssText只需一次reflow，提高了頁面渲染性能。
但cssText也有個缺點，會覆蓋之前的樣式。如
復制代碼 代碼如下:
<div style="color:red;">TEST</div>
想給該div在添加個css屬性width
復制代碼 代碼如下:
div.style.cssText = "width:200px;";
這時雖然width應用上了，但之前的color被覆蓋丟失了。因此使用cssText時應該采用疊加的方式以保留原有的樣式。
復制代碼 代碼如下:
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還需單獨處理下，如果cssText返回值沒";"則補上
復制代碼 代碼如下:
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;
}
相關：
http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration
https://developer.mozilla.org/en/DOM/CSSStyleDeclaration
相關文章
這篇文章主要介紹了如何學JavaScript？前輩的經驗之談，也就是怎么學前端的問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
業(yè)務中比較常用的JavaScript工具函數(shù)，可以用在前端環(huán)境，也可以用在node服務端，統(tǒng)一整理，方便查閱，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-09-09
JS中DOM元素的attribute與property屬性示例詳解
這篇文章主要給大家介紹了關于JS中DOM元素的attribute與property屬性的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起看看吧2018-09-09
3種js實現(xiàn)string的substring方法
這篇文章主要介紹了3種javascript實現(xiàn)string的substring方法，需要的朋友可以參考下2015-11-11
本文主要介紹了常用的javascript設計模式:單體模式;工廠模式;單例模式;觀察者模式（發(fā)布訂閱模式）;策略模式等。具有很好的參考價值，下面跟著小編一起來看下吧2017-01-01
本篇主要簡單介紹了knockoutjs中最重要的概念：可觀察對象（數(shù)組）。非常不錯具有參考借鑒價值，感興趣的朋友快來圍觀吧2016-06-06
前后端分離開發(fā)模式中,無論前后端都有可能區(qū)分不同的環(huán)境配置,下面這篇文章主要給大家介紹了關于uniapp微信小程序多環(huán)境配置以及使用的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
JavaScript對JSON數(shù)據(jù)進行排序和搜索
今天教給大家如何使用數(shù)組的方法來實現(xiàn)JSON數(shù)據(jù)進行排序和搜索功能，具體實例代碼大家參考下本文吧2017-07-07
這篇文章主要為大家介紹了ES6如何將?Set?轉化為數(shù)組的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了Bootstrap實現(xiàn)響應式導航欄效果，導航欄是一個很好的功能，是Bootstrap網站的一個突出特點，本文帶領大家學習實現(xiàn)Bootstrap導航欄,需要的朋友可以參考下2015-12-12