js得到元素样式的方法分析

1. e.style.属性:
　　优点:可读可写.(此种方式修改的是行间的样式,对于css样式表中的样式获取不到,也不能修改)
　　缺点:这种方式看似简单粗暴，但写法过于繁冗，尤其是在需要添加很多样式时尤为突出
　　注意:对于使用短划线的CSS属性名，必须将其转换成驼峰大小写形式。（如示例中的backgroundColor）

代码:

<div id="box"></div>

var box = document.getElementById("box");
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = "#f00";

2.[元素].style.cssText = [CSS样式];
　　优点:书写简洁
　　缺点:通过style.cssText方式定义的样式会将style（包括style.cssText）方式添加的样式全部重写
　　注意:此种方式添加的是行内样式.不可以单独获取每个样式(获取到的东西是字符串),而且要注意兼容性，IE8及更早版本均不支持cssText。
　　点评:总的来说此种方式读取样式不灵活
代码:

 box.style.cssText = 'width: 200px; height: 200px; border: 1px solid #f00;';

3.通过操作样式表来操作样式
　　优点:操作的是内联样式
　　缺点:此种方式只能做修改,却不可读
　　注意:此种方式操作样式的优先级没有style高.不兼容IE8以下的浏览器
代码:

var sheet = document.styleSheets[0];//要求页面中含有style标签,因为获得的是第一个style标签
sheet.insertRule('#box{width: 300px; height: 300px; background-color: #0f0;}',0);//0代表同一个选择器的第几个.也就是说0是样式的位置

insertRule()不兼容IE8及更早版本，但可以使用addRule()替代，语法稍微有点不同

sheet.addRule('#box','width: 300px; height: 300px; background-color: #0f0;',0);//第一个参数代表元素，第二个参数代表CSS样式，第三个参数代表插入位置，前两个参数必选，最后一个可选，不填则默认为0。

4.getComputedStyle(元素).属性/元素.currentStyle.属性
　　优点:可以单独的获取每个属性的值
　　缺点:不可以写
　　注意:前面是普通浏览器的写法(不兼容IE8以下浏览器),后面的兼容的写法
　　下面的函数的注意点:
　　　　　　此函数在获得复合样式的时候有兼容性问题.如单纯得到background样式,这种做法不可取;可以获得单一样式如backgroundColor(小驼峰式的写法)
　　　　　　一般不要获取自己没有设置的样式.不然不同浏览器会显示不同

代码:

function getStyle(e,s){
           var t=e.currentStyle||getComputedStyle(e);//值为null的对象返回false.而活操作只会运算true的运算
           return t[s];//s必须是字符串
       }

 当然也不要拿颜色值做判断,因为每个浏览器显示不同