1: CSSStyleDeclaration对象
跟别的属性一样，style也是元素的一个属性，只是style属性是一个比较特殊的属性，它不是一个字符串，而是一个叫做CSSStyleDeclatation的对象：一个包含CSS属性的对象。比如：
element.style.fontSize = '20px';
element.style.color = '#fff';2: js中对应的css属性的名字的规则
1: css中属性的连字符（-）变为驼峰
element.style.fontSize = '20px';
2: 当属性为js保留字时，在前面加前缀'css'
element.style.cssFloat = 'left';
3: 给属性赋值必须为字符串类型:
element.style.fontSize = '40px'; (对的)
element.style.fontSize = 40;（错的）
element.style.fontSize = '40';（也是错的，需要带上单位，除非是‘100%’之类的百分百）3: css中的复合样式
在js里面也可以像在css中那样使用复合样式，比如：
element.style.padding = '20px 30px 40px 50px';以上代码使用复合样式属性‘padding’给元素指定了'padding-top', 'padding-right', 'padding-bottom', 'padding-left'的值，分别为'20px', '30px', '40px', '50px'.
4: 通过js设置的CSS属性的权重
我们都知道在html中有三种方式来改变元素的css，分别是：
1: 内联css
<h1 style="font-size: 40px;">测试</h1>2: 嵌入式
<head>
<style type="text/css">
span{
color:red;
}
</style>
</head> 3: 外部引用
<link rel='stylesheet' type='text/css' href='reset.css'>在这三种里面，我们知道第一种内联式的权重是最高的。通过js来设置的css正好就是内联的式，所以他会覆盖嵌入式和外部引用的同名css属性。
还有一个很重要的点：要避免直接给style对象整个赋值，比如
element.style = 'fontSize: 40px';如果这个元素本来的内联属性有很多，而你的本意其实只是想改变fontSize; 但是，通过上面的代码，会把其他的内联属性都去掉，最后只留下了fontSize.
4: window.getComputedStyle(element, pseudoElement);
在全局对象window上有一个方法叫‘getComputedStyle()’, 通过它可以获取某个元素的最终的计算出来的属性，也就是最终告诉浏览器怎么去渲染这个元素的css的属性。
这个方法接受两个参数：
1: element
想要查询的元素，必须
2: pseudoElement
想要查询的元素的伪元素，当是null或者空字符串时，就是表示想查询元素本身，而不是伪元素这个方法的返回值也是一个CSSStyleDeclaration对象，只是它和元素的style属性有一些区别：
1: 它是只读的
2: 它返回的css属性的值是经过计算了的。
类似于百分比，rem之类的相对值，不会被返回，而是返回换算好之后的绝对值，比如只会返回px为单位的值
3: 颜色以'rgb(#, #, #)'或者‘rgba(#, #, #, #)’返回，而不是16进制
4: 复合样式，会以特定的属性返回。
比如window.getComputedStyle(element, pseudoElement).padding是没有的，应该查询window.getComputedStyle(element, pseudoElement).paddingTop
4: 获取一个元素的类名
想获取一个元素的CSS类名，有两个属性都可以做到：
1: className
2: classList先来实验一下，直观地感受一下这两者的区别。假如，我们有一个元素：
//HTML code
<div class="z-top-container has-banner">test</div>
//js code
var ele = document.querySelector('.z-top-container');
ele.className; //"z-top-container has-banner"
ele.classList; // ["z-top-container", "has-banner", value: "z-top-container has-banner"]
从上面的例子我们就可以看出区别：
1: className返回一个字符串，如果这个元素有多个class，则以空格分隔。
2: classList返回的是一个DOMTokenList对象：一个只读的类数组对象。
接下来我们着重地来说一下这个DOMTokenList对象。
DOMTokenList对象定义了三个修改元素的class的方法：
1: add(className)
参数为class名字，类型为字符串，作用是给这个元素添加一个class
ele.classList.add('hehe'); //给元素ele添加了一个名为‘hehe’的长css 类
2: remove(className)
参数为class名字，类型为字符串，作用是给这个元素删除一个class
ele.classList.remove('hehe');//从ele的css类里面去掉‘hehe’这个类
3: toggle(className)
参数为class名字，类型为字符串，作用是如果元素没有这个class，就添加；如果已经有了，就删除。
956
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
