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必須是字符串
       }

 當然也不要拿顏色值做判斷,因為每個瀏覽器顯示不同