用cssText批量修改樣式

時間 2019-12-08

標籤 csstext 批量修改樣式简体版

原文原文鏈接

通常狀況下咱們使用js設置元素對象的樣式會使用這樣的形式：css

var ele= document.getElementById("id");html

ele.style.display="block";瀏覽器

ele.style.width="200px";性能

ele.style.border="solid 1px red";測試

這樣的話若是須要更改的樣式比較多的話，就要寫不少代碼，並且經過JS來修改對象的樣式是一種比較典型的銷燬原樣式並重建的過程，這個過程會增長瀏覽器的開銷，下降性能。ui

咱們知道在jQuery能夠這樣寫：htm

$("id").css({ "display": "block","width": "200px" ,"border":"solid 1px red"});對象

可是使用原生JS該怎麼寫呢？繼承

其實js中有一個cssText的方法：ip

語法爲：obj.style.cssText=」樣式」;

這樣上面的代碼就能夠改成：

ele.style.cssText="display:block;width:200px;border:1px solid red;";

可是，這樣會有一個問題，cssText會清除以前元素已經含有的樣式，好比原來style中有"color:blue",執行完以後，color樣式就沒了。爲了解決這個問題，應該改成以下cssText累加的方式：

ele.style.cssText+="display:block;width:200px;border:1px solid red;";

可是查資料時看到說cssText（假如不爲空）在IE中（對!又是IE!!）最後一個分號會被刪掉，累加的方法在IE中是無效的（我在IE11測試沒有問題，再低的版本暫時不想安裝，沒測）。

爲了以防萬一，能夠在樣式開頭添加一個分號來解決這個問題：

ele.style.cssText+=";display:block;width:200px;border:1px solid red;";

--------------------------------2017-09-16補充----------------------------------

style只能得到內聯樣式,沒法得到樣式表中繼承/層疊來的樣式，

解決: 從此凡是讀取樣式，都要讀取計算後的樣式(Computed)。

計算後的樣式: 最終應用到元素上的全部樣式的綜合，並將相對單位計算爲絕對單位。

第1步：得到計算後的全部css屬性的總和：style對象

　　　　var style=getComputedStyle(elem)

第2步：從style中得到想要的css屬性

style.css屬性

強調: 計算後的樣式都是隻讀，不容許修改

問題: 一句話只能修改一個css屬性

解決: 如何批量修改一個元素的多個屬性:

1. 先在css中將多個屬性定義爲一個class

2. 在js中修改元素的className爲指定的class

——————————————————————————————————————————————————————————

<!DOCTYPE html><html><head lang="zh-cn">    <meta charset="UTF-8">    <title></title>    <style>        #demo{            color:red;            font-weight: bold;        }    </style></head><body><h1>cssText</h1><p id="demo" style="background:yellow;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi cumque dignissimos fuga hic illum molestias natus neque repellat repudiandae. Ab commodi corporis, delectus doloremque dolorum enim nesciunt porro qui totam?</p><script>    var demo=document.getElementById("demo");    //console.log(demo.style.cssText);    demo.style.cssText+=";color:blue;font-size:40px;";    var dStyle=getComputedStyle(demo);    console.log(dStyle.fontSize);</script></body></html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。