js css樣式操作代碼（批量操作）
更新時(shí)間：2009年10月09日 12:38:45 作者：
用js控制css樣式，能讓網(wǎng)頁(yè)達(dá)到良好的的用戶體驗(yàn)甚至是動(dòng)畫的效果。并且考慮到效率。
我們用js書寫css樣式通常會(huì)用下面的兩種方式：
一般情況下我們用js設(shè)置元素對(duì)象的樣式會(huì)使用這樣的形式：
var element= document.getElementById(”id”);
element.style.width=”20px”;
element.style.height=”20px”;
element.style.border=”solid 1px red”;
但是上面的方法有一個(gè)缺點(diǎn)，樣式一多，代碼就很多；而且通過JS來(lái)覆寫對(duì)象的樣式是比較典型的一種銷毀原樣式并重建的過程，這種銷毀和重建，都會(huì)增加瀏覽器的開銷。
js中有一個(gè)cssText的方法：
語(yǔ)法為：obj.style.cssText(”樣式”)；
上面的代碼我們可以修改成：
element.style.cssText=”width:20px;height:20px;border:solid 1px red;”;
這種寫法可以盡量避免頁(yè)面的多次reflow，提高頁(yè)面性能。
一般情況下我們用js設(shè)置元素對(duì)象的樣式會(huì)使用這樣的形式：
復(fù)制代碼 代碼如下:
var element= document.getElementById(”id”);
element.style.width=”20px”;
element.style.height=”20px”;
element.style.border=”solid 1px red”;
但是上面的方法有一個(gè)缺點(diǎn)，樣式一多，代碼就很多；而且通過JS來(lái)覆寫對(duì)象的樣式是比較典型的一種銷毀原樣式并重建的過程，這種銷毀和重建，都會(huì)增加瀏覽器的開銷。
js中有一個(gè)cssText的方法：
語(yǔ)法為：obj.style.cssText(”樣式”)；
上面的代碼我們可以修改成：
復(fù)制代碼 代碼如下:
element.style.cssText=”width:20px;height:20px;border:solid 1px red;”;
這種寫法可以盡量避免頁(yè)面的多次reflow，提高頁(yè)面性能。
您可能感興趣的文章:
- JS函數(shù)實(shí)現(xiàn)動(dòng)態(tài)添加CSS樣式表文件
- 用JavaScript修改CSS屬性的代碼
- js控制CSS樣式屬性語(yǔ)法對(duì)照表
- js中巧用cssText屬性批量操作樣式
- CSS和JS標(biāo)簽style屬性對(duì)照表(方便js開發(fā)的朋友)
- 動(dòng)態(tài)調(diào)用CSS文件的JS代碼
- JS 控制CSS樣式表
- js 操作css實(shí)現(xiàn)代碼
- js 設(shè)置css的定位
- js CSS操作方法集合
- 用JS實(shí)現(xiàn)一個(gè)頁(yè)面多個(gè)css樣式實(shí)現(xiàn)
- JS控制CSS樣式的方法
- 如何用js控制css中的float的代碼
- 用js控制css的不錯(cuò)的方法
- JS修改css樣式style淺談
相關(guān)文章
詳談js對(duì)url進(jìn)行編碼和解碼(三種方式的區(qū)別)
下面小編就為大家?guī)?lái)一篇詳談js對(duì)url進(jìn)行編碼和解碼(三種方式的區(qū)別)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-08-08
編輯浪子版表單驗(yàn)證類...2007-05-05
20個(gè)必會(huì)的JavaScript面試題(小結(jié))
這篇文章主要介紹了20個(gè)必會(huì)的JavaScript面試題(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2019-07-07
使用uniapp實(shí)現(xiàn)發(fā)布朋友圈功能
這篇文章主要介紹了使用uniapp實(shí)現(xiàn)發(fā)布朋友圈功能,在文章底部給大家介紹了uniapp?微信小程序分享、分享朋友圈功能，通過頁(yè)內(nèi)自定義分享按鈕，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了功能強(qiáng)大的Bootstrap效果展示，介紹常用Bootstrap效果的使用方法，感興趣的小伙伴們可以參考一下2016-08-08
使用有限狀態(tài)機(jī)實(shí)現(xiàn)簡(jiǎn)版的html解析器
FSM(Finite State Machines) 有限狀態(tài)機(jī),也叫有限狀態(tài)自動(dòng)機(jī),是為研究有限內(nèi)存的計(jì)算過程和某些語(yǔ)言類而抽象出的一種計(jì)算模型,本文將使用有限狀態(tài)機(jī)實(shí)現(xiàn)一個(gè)簡(jiǎn)版的html解析器,有需要的小伙伴可以參考下2023-11-11
JS實(shí)現(xiàn)鼠標(biāo)拖拽盒子移動(dòng)及右鍵點(diǎn)擊盒子消失效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)鼠標(biāo)拖拽盒子移動(dòng)及右鍵點(diǎn)擊盒子消失效果,涉及javascript事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01
JS實(shí)現(xiàn)獲取當(dāng)前URL和來(lái)源URL的方法
這篇文章主要介紹了JS實(shí)現(xiàn)獲取當(dāng)前URL和來(lái)源URL的方法,涉及javascript針對(duì)頁(yè)面document屬性操作的相關(guān)技巧,需要的朋友可以參考下2016-08-08
數(shù)組去重復(fù)是一個(gè)常見的需求，我們暫時(shí)考慮同類型的數(shù)組去重復(fù)。主要是理清思路和考慮下性能。以下方法，網(wǎng)上基本都有，這里只是簡(jiǎn)單地總結(jié)一下分享給大家。2015-04-04
這篇文章主要介紹了JS獲取元素多層嵌套思路詳解的相關(guān)資料,需要的朋友可以參考下2016-05-05