1.获取最终样式
<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>
2.getComputedStyle和currrentStyle都是获取元素的最终css,获取行间样式可以用getComputedStyle或者currentStyle，也可以直接style.attr;但是获取非行间样式只能用getComputedStyle或者currentStyle
3.window.getComputedStyle(ele,null)等价于document.defaultView.getComputedStyle(ele,null);
在gecko 2.0之前的第二个参数是必须设置的，第二个参数是一个伪元素，如果没有伪元素，设置为null.如果第二个参数为null,获取到的是当前元素的样式，如果是伪元素，获得的是伪元素的样式
<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.
4.1 getComputedStyle和currentStyle是只读的，而element.style是读写的
4.2getComputedStyle和currentStyle获取的是最终应用在元素上的css对象,即使没有css代码，也会列出默认的属性,而element.style只能获取style属性中设置的css样式
5.getPropertyValue
(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
6.document.defaultView和window的关系
document.defaultView返回当前document对象所关联的window对象，如果没有，返回null;