用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>