DOM编程艺术-样式操作（上）

用户交互之后引起页面中样式的变化；那我们就可以通过js动态修改css进而修改页面的样式。

1. CSS与DOM对象对应关系

外部样式表对应 element.sheet；

html内嵌样式表（<style>）对应element.sheet;

标签内样式对应element.style；

页面所有的样式表对应document.stylesheet;

而element.sheet.cssRules代表对应css样式表内所有元素的样式，因此可以通过下标的方式获取相应的样式，例如element.sheet.cssRules[1]，即获取了第二个元素的样式；而element.sheet.cssRules[1].style则是对象所对应的样式表的键值对，element.sheet.cssRules[1].selectorText则是对应的html属性选择器；通过element.sheet.cssRules[1].style.属性名，就可以获得相应属性的相应样式了。

这里的style是cssstyleDeclaration这个类所对应的DOM对象；

2. 更新样式

-element.style

例如一个输入框，在输入错误的时候需要显示红色，那么对应的js就是：element.style.borderColor='red'; element.style.color='red';需要注意的是，这里的element也是需要通过dom获取的对象，var input=document.getElementbyId='inputId'; 此时的element就是input了。这样就给input设置了一个内嵌的样式，在html中，内嵌样式表的优先级是最高的。

不过这样的更新方式，一个属性就需要一个语句，也不是我们熟悉的css，我们可以用

-element.style.cssText

上面的例子就可以写成:element.style.cssText='border-color:red; color:red';就可以一次性设置同一个元素的多个样式了

但以上两种方法都是混在逻辑中，也就是在js中直接对css样式进行操作，这样会增加js代码的数量，而且因为样式繁多而容易出错，更好的办法则是更新class

-更新class

现在css样式表中申明一个以类名选择器（空）写出的样式，然后通过dom调用这个样式，element.className+='类名';来给对应的element增加一个类，而这个元素就具有了这个类所具有的样式；