想要得到某个元素的某个样式属性，可以用：
1 <div id="div01" style="color:red">123</div> 2 3 var ele = document.getElementById("div01"); 4 console.log(ele.style.color);
但这样只能得到写在元素上的行内样式，对于link进来的样式文件或<style></style>中写的样式是获取不到的。
标准浏览器提供了一个getComputedStyle函数，具体用法是:
1 // 第一个参数为要获取样式的节点，第二个参数为伪类，如:hover，如果没有就填false或null.返回CSSStyleDeclaration对象； 2 window.getComputedStyle(element,伪类) 3 4 //可以通过属性名来获得需要的样式，下面就得到了元素的字体颜色 5 window.getComputedStyle(ele,false)["color"];
可IE不支持，但它提供了一个currentStyle对象，得到的结果和getComputedStyle差不多
1 // IE下通过这种方式也可以得到元素的字体颜色 2 ele.currentStyle["color"];
综合上面的情况，我们做一下兼容便可以得到靠谱的解决方法！
1 function getStyle(ele,name){ 2 if (ele.currentStyle) { // IE下的处理 3 return ele.currentStyle[name]; 4 } else { // 标准浏览器处理 5 return getComputedStyle(ele, false)[name]; 6 } 7 }
再去获取div01的样式的时候就很方便了！
完整代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>demo</title> 6 <style> 7 #div01{font-size:16px;} 8 </style> 9 </head> 10 <body> 11 <div id="div01" style="color:red">123</div> 12 <script> 13 function getStyle(ele,name){ 14 if (ele.currentStyle) { 15 return ele.currentStyle[name]; 16 } else { 17 return getComputedStyle(ele, false)[name]; 18 } 19 } 20 21 var ele = document.getElementById("div01"); 22 23 console.log(getStyle(ele,"color")); // rgb(255, 0, 0) 24 console.log(getStyle(ele,"fontSize")); // 16px 25 26 </script> 27 </body> 28 </html>
原文：http://www.cnblogs.com/tyson/p/4321197.html