本人經過整理總結出以下獲取樣式值的方法，如有錯誤請各位大佬指正。 有四種方法：style，currentStyle，getComputedStyle，rules 與 cssRules方法。
1. style
用法：document.getElementById(“id”).style.property=”值”。
例子：
<style> .yellow{height:200px;width:200px;background: yellow;} </style> </head> <body> <div id="div1" class="yellow" style="color:red"></div> <script> var div1=document.getElementById("div1"); div1.onclick=long; function long(){ alert(div1.style.width);//空值 alert(div1.style.color);//red div1.style.color="blue"; div1.style.width="300px"; alert(div1.style.color);//blue alert(div1.style.width);//300px } </script>
總結：style對象只能讀寫內聯樣式的值，不能夠讀寫內部樣式和外部樣式的值。經過測試兼容IE8，Chrome，Firefox瀏覽器。
2.currentStyle
用法：document.getElementById(“id”).currentStyle.property。
<style> .yellow{height:200px;width:200px;background: yellow;} </style> </head> <body> <div id="div1" class="yellow"></div> <script> var div1=document.getElementById("div1"); div1.onclick=long; function long(){ //div1.currentStyle.width="300px";//Uncaught TypeError: Cannot set property 'width' of undefined alert(div1.currentStyle.width);//200px } </script>
總結：currenStyle只能讀取元素最終用到的樣式值，不能用來設置相關值。經過測試只對IE8瀏覽器兼容，Chrome和Firefox，Safari不兼容。
3.getComputedStyle
用法：window.getComputedStyle(元素).property
<style> .yellow{height:200px;width:200px;background: yellow;} </style> </head> <body> <div id="div1" class="yellow"></div> <script> var div1=document.getElementById("div1"); div1.onclick=long; function long(){ //window.getComputedStyle(div1).width="300px";// Failed to set the 'width' property on 'CSSStyleDeclaration' alert(window.getComputedStyle(div1).width);//200px } </script>
總結：getComputedStyle只能讀取元素最終用到的樣式值，不能用來設置相關值。經過測試對Chrome和Firefox，Safari兼容，對IE8瀏覽器不兼容。
4.rules 與 cssRules方法
用法：document.styleSheets[0].rules[0];
document.styleSheets[0].cssRules[0];
<style> .yellow{height:200px;width:200px;background: yellow;} #div1{height:300px;} </style> </head> <body> <div id="div1" class="yellow"></div> <script> var div1=document.getElementById("div1"); div1.onclick=long; function long(){ if(document.styleSheets[0].rules){//兼容IE8，Chrome，不兼容Firefox var s1=document.styleSheets[0].rules[0]; var s2=document.styleSheets[0].rules[1]; alert(s1.style.background);//yellow alert(s2.style.background);//空值 s1.style.background="red";//.yellow中背景色設為紅色 s2.style.background="blue";//#div1中背景色設為藍色，最終根據css就近規則顯示藍色 alert(s1.style.background);//red alert(s2.style.background);//blue }else{//兼容Firefox，Chrome，不兼容IE8 var s1=document.styleSheets[0].cssRules[0]; var s2=document.styleSheets[0].cssRules[1]; alert(s1.style.height);//200px alert(s2.style.height);//300px s1.style.height="400px"; s2.style.height="600px"; alert(s1.style.height);//400px alert(s2.style.height);//600px } } </script>
總結：rules和cssRules可以讀寫內部樣式，外部樣式的樣式值。經過測試Chrome兩者都兼容，Firefox兼容cssRules對rules不兼容，IE8瀏覽器兼容rules對cssRules不兼容。