标签：
<script> //获取非行间样式(style标签里的样式或者link css文件里的样式)，obj是元素，attr是样式名 function getStyle(obj,attr){ //针对IE if(obj.currentStyle){ return obj.currentStyle[attr]; //由于函数传过来的attr是字符串，所以得用[]来取值 }else{ //针对非IE return window.getComputedStyle(obj,false)[attr]; } } /* 获取或者设置css属性 */ function css(obj,attr,value){ if(arguments.length == 2){ return getStyle(obj,attr); }else{ obj.style[attr] = value; } } </script>
<style> div{ width:200px; height:200px; background-color:#FC9; font-size:20px; text-align:center; } div:after{ content:"This is after"; display:block; width:100px; height:100px; background-color:#F93; margin:0 auto; line-height:50px; } </style> <body> <div id=‘myDiv‘> This is div </div> <input id=‘btn‘ type="button" value=‘getStyle‘/> <script> var btn = document.querySelector(‘#btn‘); btn.onclick = function(){ var div = document.querySelector(‘#myDiv‘); var styleObj = window.getComputedStyle(div,‘after‘); console.log(styleObj[‘width‘]); } </script> </body>
打印出伪元素:after的width 100px;
4.1 getComputedStyle和currentStyle是只读的，而element.style是读写的
4.2getComputedStyle和currentStyle获取的是最终应用在元素上的css对象,即使没有css代码，也会列出默认的属性,而element.style只能获取style属性中设置的css样式
(1).getPropertyValue的方法在CSSStyleDeclaration对象的prototype中，而CSSStyleDeclaration对象是通过getComputedStyle得到的。
(2).getPropertyValue里面的参数是CSS属性名字符串，而且CSS属性名不能是驼峰式表示的，比如width,backgroun-color,height,text-align都行，但是backgroundColor,textAlign这种驼峰表示的CSS属性名，getPropertyValue不能识别
(3).
obj.currentStyle[‘margin-left‘] 有效
obj.currentStyle[‘marginLeft‘] 有效
window.getComputedStyle(obj,null)[‘margin-left‘] 有效
window.getComputedStyle(obj,null)[‘marginLeft‘] 有效
window.getComputedStyle(obj,null).getPropertyValue(‘margin-left‘) 有效
window.getComputedStyle(obj,null).getPropertyValue(‘marginLeft‘) 无效
obj.currentStyle.width 有效
obj.currentStyle.background-color 无效
obj.currentStyle.backgroundColor 有效
window.getComputedStyle(obj,null).width 有效
window.getComputedStyle(obj,null).background-color 无效
window.getComputedStyle(obj,null).backgroundColor 有效
综上，就是带有"-"的属性不能直接点出来，所以有getPropertyValue方法来处理，但是可以用[]来取代getPropertyValue
标签：
原文地址：http://www.cnblogs.com/pmx-pmx/p/5822536.html
