用cssText批量修改样式
一般情况下我们使用js设置元素对象的样式会使用这样的形式：
var ele= document.getElementById("id");
ele.style.display="block";
ele.style.width="200px";
ele.style.border="solid 1px red";
这样的话如果需要更改的样式比较多的话，就要写很多代码，而且通过JS来修改对象的样式是一种比较典型的销毁原样式并重建的过程，这个过程会增加浏览器的开销，降低性能。
我们知道在jQuery可以这样写：
$("id").css({ "display": "block","width": "200px" ,"border":"solid 1px red"});
但是使用原生JS该怎么写呢？
其实js中有一个cssText的方法：
语法为：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>
