DOM操作样式

1.访问元素的样式

首先要知道CSS样式有三种形式（CSS内容，这儿不赘述）：

行内：就是在标签里的style属性添加的样式；

内联：就是<style>…</style>标签里书写的样式；

链接：就是通过<link href=” ”/>标签链接到的样式.

任何HTML元素标签都会有一个通用的属性：style。它会返回CSSStypeDeclaration对象。下面我们看几个最常见的行内style样式的访问方式。

var box = document.getElementById('box'); //获取box

box.style; //CSSStyleDeclaration

box.style.color; //red

box.style.fontSize; //20px

box.style.cssFloat || box.style.styleFloat; //left，非IE用cssFloat，IE用styleFloat

PS：以上取值方式也可以赋值，最后一种赋值可以如下：

typeof box.style.cssFloat != 'undefined' ?

box.style.cssFloat = 'right' : box.style.styleFloat = 'right';

PS：Firefox、Safari、Opera9+、Chrome支持这些属性和方法。IE只支持cssText，而getPropertyCSSValue()方法只有Safari3+和Chrome支持，因此这些属性和方法用处不大，了解即可。

box.style.cssText; //获取CSS代码

//box.style.length; //3，IE不支持

//box.style.removeProperty('color'); //移除某个CSS属性，IE不支持

//box.style.setProperty('color','blue'); //设置某个CSS属性，IE不支持

PS：style属性仅仅只能获取行内的CSS样式，对于另外两种形式内联<style>和链接<link>方式则无法获取到。

虽然可以通过style来获取单一值的CSS样式，但对于复合值的样式信息，就需要通过计算样式（计算后的样式一般指默认样式和设置后的样式）来获取。DOM2级样式，window对象下提供了getComputedStyle()方法。接受两个参数，需要计算的样式元素，第二个伪类(:hover)，如果没有伪类，就填null。

PS：IE不支持这个DOM2级的方法，但有个类似的属性可以使用currentStyle属性。

下列代码强烈建议手动敲一下，感受一下各浏览器的魅力：

　　var box = document.getElementById('box');

　　var style = window.getComputedStyle ?

　　 window.getComputedStyle(box, null) : null || box.currentStyle;

alert(style .color); //颜色在不同的浏览器显示格式不同

alert(style .border); //不同浏览器不同的结果

alert(style .fontFamily); //计算显示复合的样式值

alert(style.border); 　　　　　　　//复合型属性就无法在各浏览器中统一获取了

alert(style.borderTopColor); 　　　　　　　　 //这种形式书写方式获取

PS：border属性是一个综合属性，所以他在Chrome显示了，Firefox为空，IE为undefined。所谓综合性属性，就是XHTML课程里的简写形式，所以，DOM在获取CSS的时候，最好采用完整写法兼容性最好，比如：border-top-color之类的。

PS：getComputedStyle()方法和currentStyle属性无所谓什么CSS样式，行内，内联，链接都可以，但是仅仅能获取，不能够赋值！！！

2.操作样式表

使用style属性可以设置行内的CSS样式，而通过id（非常不建议通过修改id来变换一个元素的CSS样式）和class调用是最常用的方法。

box.id = 'pox'; //把ID改变会带来灾难性的问题

box.className = 'red'; //通过className关键字来设置样式

在添加className的时候，我们想给一个元素添加多个class是没有办法的，后面一个必将覆盖掉前面一个，所以必须来写个函数：

之前我们使用style属性，仅仅只能获取和设置行内的样式，如果是通过内联<style>或链接<link>提供的样式规则就无可奈何了，然后我们又学习了getComputedStyle和currentStyle，这只能获取却无法设置。

CSSStyleSheet类型表示通过<link>元素和<style>元素（注意这两种形式的都包括）包含的样式表。首先本身我们可以通过下面的方式获取两种元素：

document.implementation.hasFeature('StyleSheets', '2.0') //是否支持DOM2级样式表

document.getElementsByTagName('link')[0]; //HTMLLinkElement（<link> 形式）

document.getElementsByTagName('style')[0]; //HTMLStyleElement (<style> 形式)

这两个元素本身返回的是HTMLLinkElement和HTMLStyleElement类型，但CSSStyleSheet类型更加通用一些。得到这个类型非IE使用sheet属性，IE使用styleSheet：

var link = document.getElementsByTagName('link')[0];

　　 var sheet = link.sheet || link.styleSheet; //得到CSSStyleSheet

注意：首先需要明确，什么是样式规则？一群样式的集合表示一个规则（比如说，在.css文件中，每一个花括号就表示一个样式规则），当然这儿的样式既包括连接也包括内联样式。

PS：除了几个不用和IE不支持的我们忽略了，还有三个有IE对应的另一种方式：

　　sheet.rules; 　　　　 //代替cssRules的IE版本

　　sheet.removeRule(0); 　　　　 //代替deleteRule的IE版本

　　sheet.addRule("body", "background-color:red", 0);　　//代替insertRule的IE版本