我们知道通过
document.getElementById("argument"); //argument（元素）;
value = argument.style.width;的方式可以轻松获取 或者读写该argument的样式（宽度）。但是我们知道这个属性是在<HMTL>标签中的，那么如果我们argument的样式写在CSS中呢？我们就需要用别的方法来获取它的样式值.那么，我们就要用到
getComputedStyle("argument",":after") .width //谷歌、火狐等非IE内核浏览器
argumet.currentStyle.width //IE浏览器获取样式
这两种方法来获取CSS文件中的样式值。那么我们可以通过下面的方法来判别浏览器以及获取并return出我们要的值。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <title>GetStyle</title> 7 <meta name="description" content=""> 8 <meta name="keywords" content=""> 9 <link href="" rel="stylesheet"> 10 <style> 11 .box{ 12 200px; 13 background: gray; 14 } 15 </style> 16 </head> 17 <body> 18 <div class="box" id="box" style="height:200px"> 19 20 </div> 21 </body> 22 <script> 23 var obox = document.getElementById("box"); 24 function getStyle (ele,prop) { 25 var value; 26 if(prop in document.body.style){ 27 if(window.getComputedStyle){ 28 value = getComputedStyle(ele,null)[prop]; 29 }else{ 30 value = obox.currentStyle.width; 31 } 32 }else{ 33 value = ele.style[prop]; 34 } 35 value = parseFloat(value); 36 return value; 37 } 38 alert(getStyle(obox,"width")); 39 alert(getStyle(obox,"height")); 40 </script> 41 </html>
经过网上查询(原文地址:http://blog.163.com/hongshaoguoguo@126/blog/static/180469812013217101436660/)
了解到getComputedStyle与style的区别
1、只读与可写
getComputedStyle方法是只读的，只能获取样式，不能设置；而element.style能读能写。
2、获取的对象范围
getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认的祖宗八代都显示出来）；而 element.style只能获取元素style属性中的Style样式。因此对于一个光秃秃的元素<p>，getComputedStyle方法返回对象中length属性值（如果有）就是190+(据我测试FF:192, IE9:195, Chrome:253, 不同环境结果可能有差异), 而element.style就是0。
getComputedStyle与currentStyle
currentStyle是IE浏览器自己的一个属性，其与element.style可以说是近亲，至少在使用形式上类似，element.currentStyle，差别在于element.currentStyle返回的是元素当前应用的最终CSS属性值（包括外链CSS文件，页面中嵌入的<style>属性等）。
因此，从作用上将，getComputedStyle方法与currentStyle属性走的很近，形式上则style与currentStyle走的近。不过，currentStyle属性貌似不支持伪类样式获取，这是与getComputedStyle方法的差异，也是jQuery css()方法无法体现的一点。
getPropertyValue方法
getPropertyValue方法可以获取CSS样式申明对象上的属性值（直接属性名称），例如：
window.getComputedStyle(element, null).getPropertyValue("float");
用getPropertyValue方法不必可以驼峰书写形式（不支持驼峰写法），例如：style.getPropertyValue("border-top-left-radius");
兼容性:getPropertyValue方法IE9+以及其他现代浏览器都支持，对于IE6-8有另外一套方案