DOM编程艺术（样式操作）

CSS   ------------->       DOM

外部引用的css文件和内嵌式的css  对应的DOM对象为element.sheet，也可以通过document.styleSheets来获取到。

行内样式对应的DOM对象为element.style。

element.sheet.cssRules[1].style.lineHeight    ：中的style对应键值对，是CSSStyleDeclaration这个类的一个对象。

                                                  .selectorText  

一、更新样式

1、element.style

需求描述：将输入框的边框颜色和字体颜色都设为红色

element.style.borderColor = 'red';
element.style.color = 'red';

存在的问题：

更新一个属性需要一条语句

不是我们熟悉的CSS，有“-”的都换成了驼峰式命名。

2、换成CSS写法：

element.style.cssText

element.style.cssText = 'border-color:red;color:red;';

这两种方法都存在的问题：

样式混在逻辑中

3、更新class——推荐

就是在已有的css样式中加上:

.invalid{
	border-color:red;
	color:red;
}

然后写js代码为需要修改样式的元素添加class：

element.className += ' invalid';

4、更换样式表

需求：一次更新很多元素的样式

解答：更换样式表

style获取到的不一定是实际样式

window.getComputedStyle()          这里获取的是一个只读属性，不能修改，能获取到元素的实际样式。（但是在IE9以下不支持，使用element.currentStyle）

var style = window.getComputedStyle(element[,pseudoElt]);