关于JS获取样式

众所周知，html里面有行间样式，style标签样式，外链样式三种。。

1、对于行内样式，直接可以获取node元素上的style的属性，，style属性本身也是css样式对象，直接获取，无关计算后的值或者单位，，你在行间的单位写的是rem，，你在js里面获得的也就是rem的字符串，，但我们一般很少写在html的各个标签上，这有悖于w3c的结构样式分离的思想，并且维护起来困难，这里不细说。

2、对于html中style标签中的样式，目前我只发现了通过TagNames["style"][n]这样的方法去获得这个标签的innerText（这个属性不兼容，contentText/fireFog），或者更麻烦的方法（childNodes[0].nodeValue）不过也没必要，获取到的是类似纯文本的css 字符串，你要想得到某一个属性，还很麻烦，正则或者string对象的方法。写在style标签里面的用法也不多。

3、对于link外面的css的样式文件，，个人觉得挺好用的，也不会有什么css用的rem单位，，在js里面获去计算后的样式就是'px‘这样的转换问题。只不过有点不兼容，基本用if（）else{}就可以搞定ie，chrome，firefog之类的游览器。。

var sheet = document.styleSheets[0];  //获得第一个link外链css集群

/*-----------------------获得规则-----------------------*/

sheet.rules[1] /ie支持的写法。。sheet.cssRules[1] /chrome和火狐的写法      //代表的是第二个样式规则

sheet.rules[1].style.backgroundColor  或者 sheet.cssRules[1].style.backgroundColor  //访问第二个样式规则下的背景颜色。。

/*--------------------添加规则-----------------------------*/

sheet.insertRlue(" #div { width:300px ; height:300px; background-color:red; } ",2)  //chrome或者firefog的写法，在集群2的位置添加样式

sheet.addRlue("#div","width:300px;height: 300px; background: red", 2);        //ie的写法，，在集群2的位置添加样式

/*-------------------------删除样式----------------------------*/

sheet.deleteRule(num index)    //chrome或者firefog中删除指定索引的样式规则

sheet.removeRlue( index num )  //ie上删除

（注意，索引位置不能大于sheet.rules.length或者sheet.cssRules.length,不然报错）

4、关于window.getComputedStyle(element,伪类（null）)['backgroundColor']和element.currentStyle["background"];获得游览器计算后的css样式，第一个chrome和firefog，第二个ie下的写法。。注意是获取游览器计算后的样式。。’px'