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