用cssText批量修改樣式
更新時(shí)間：2009年08月29日 22:11:49 作者：
一般情況下我們用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="樣式";
上面的代碼我們可以修改成：感謝sliuqin的在留言中的斧正
element.style.cssText("width:20px;height:20px;border:solid 1px red;")
下面是是正確的
復(fù)制代碼 代碼如下:
element.style.cssText="width:20px;height:20px;border:solid 1px red;";
這樣就可以盡量避免頁面reflow，提高頁面性能。
相關(guān)文章
老司機(jī)們，你知道JSON.stringify還有第二個和第三個可選參數(shù)嗎？它們是什么呢？是不是感到不可思議？下面這篇文章就來給大家介紹了一些你可能不知道的JSON.stringify的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2017-08-08
JavaScript判斷數(shù)組的方法總結(jié)與推薦
這篇文章主要給大家介紹了關(guān)于JavaScript判斷數(shù)組方法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-02-02
這篇文章主要介紹了JavaScript錯誤捕獲的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用JavaScript，感興趣的朋友可以了解下2021-04-04
WebApi+Bootstrap+KnockoutJs打造單頁面程序
這篇文章主要介紹了WebApi+Bootstrap+KnockoutJs打造單頁面程序的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
ES6 Iterator遍歷器原理，應(yīng)用場景及相關(guān)常用知識拓展詳解
這篇文章主要介紹了ES6 Iterator遍歷器原理，應(yīng)用場景及相關(guān)常用知識拓展,結(jié)合實(shí)例形式詳細(xì)分析了ES6 Iterator遍歷器具體原理、功能、用法、應(yīng)用場景及知識拓展,需要的朋友可以參考下2020-02-02
Bootstrap輪播插件中圖片變形的終極解決方案 使用jqthumb.js
這篇文章主要介紹了Bootstrap輪播插件中圖片變形的終極解決方案，使用jqthumb.js，感興趣的小伙伴們可以參考一下2016-07-07
今天小編就為大家分享一篇對layui初始化列表的CheckBox屬性詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
本文主要介紹了uni-app組件的基本使用,包括組件的引入、使用和常見問題解決方法,通過本文的學(xué)習(xí),讀者可以掌握uni-app組件的基本操作,為開發(fā)uni-app應(yīng)用提供幫助,需要的朋友可以參考下2023-03-03
javascript實(shí)現(xiàn)移動端 HTML5 圖片上傳預(yù)覽和壓縮功能示例
這篇文章主要介紹了javascript實(shí)現(xiàn)移動端 HTML5 圖片上傳預(yù)覽和壓縮功能,結(jié)合實(shí)例形式分析了javascript移動端 HTML5 圖片上傳預(yù)覽和壓縮功能具體實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05
echarts餅圖labelLine線的長度自適應(yīng)設(shè)置
這篇文章主要給大家介紹了關(guān)于echarts餅圖labelLine線的長度自適應(yīng)設(shè)置的相關(guān)資料,在echarts中,餅圖的標(biāo)簽線可以通過設(shè)置 labelLine屬性來自定義位置,需要的朋友可以參考下2023-08-08