js css樣式操作代碼（批量操作）

更新時間：2009年10月09日 12:38:45 作者：

用js控制css樣式，能讓網(wǎng)頁達到良好的的用戶體驗甚至是動畫的效果。并且考慮到效率。

我們用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(”樣式”)；
上面的代碼我們可以修改成：

復(fù)制代碼代碼如下:

element.style.cssText=”width:20px;height:20px;border:solid 1px red;”;

這種寫法可以盡量避免頁面的多次reflow，提高頁面性能。

您可能感興趣的文章:

js
css樣式

相關(guān)文章

詳談js對url進行編碼和解碼(三種方式的區(qū)別)
下面小編就為大家?guī)硪黄斦刯s對url進行編碼和解碼(三種方式的區(qū)別)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
編輯浪子版表單驗證類
編輯浪子版表單驗證類...
2007-05-05
20個必會的JavaScript面試題(小結(jié))
這篇文章主要介紹了20個必會的JavaScript面試題(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-07-07
使用uniapp實現(xiàn)發(fā)布朋友圈功能
這篇文章主要介紹了使用uniapp實現(xiàn)發(fā)布朋友圈功能,在文章底部給大家介紹了uniapp?微信小程序分享、分享朋友圈功能，通過頁內(nèi)自定義分享按鈕，結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下
2022-09-09
功能強大的Bootstrap效果展示（二）
這篇文章主要介紹了功能強大的Bootstrap效果展示，介紹常用Bootstrap效果的使用方法，感興趣的小伙伴們可以參考一下
2016-08-08
使用有限狀態(tài)機實現(xiàn)簡版的html解析器
FSM(Finite State Machines) 有限狀態(tài)機,也叫有限狀態(tài)自動機,是為研究有限內(nèi)存的計算過程和某些語言類而抽象出的一種計算模型,本文將使用有限狀態(tài)機實現(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
javascript數(shù)組去重的方法匯總
數(shù)組去重復(fù)是一個常見的需求，我們暫時考慮同類型的數(shù)組去重復(fù)。主要是理清思路和考慮下性能。以下方法，網(wǎng)上基本都有，這里只是簡單地總結(jié)一下分享給大家。
2015-04-04
JS獲取元素多層嵌套思路詳解
這篇文章主要介紹了JS獲取元素多層嵌套思路詳解的相關(guān)資料,需要的朋友可以參考下
2016-05-05