javascript获取元素CSS值window.getComputedStyle

获取元素div的height

源代码：

<div id="box"></div>

<style>
*{ padding:0; margin:0px;}
ul,li{ list-style:none;}
#box{ width:100px; height:100px; padding:50px; border:25px solid #0F3; margin:25px; opacity:0.5; filter:alpha(opacity=50); }

</style>

var box = document.getElementById("box");

方法：

1、box.style.height可以获取到height的值，但是只能获取到内嵌样式中（即style属性中）的css样式

2、window.getComputedStyle(“元素”,“伪类”)方法会在一个元素应用完有效样式且计算完所有属性的基本值之后给出所有 CSS 属性的值。

输出window.getComputedStyle(box,null)，返回的是一个 CSSStyleDeclaration 对象，当元素的样式更改时，它会自动更新本身。但其不兼容IE6-8。

3、IE中使用box.currentStyle

综合：

function getStyle(element,attr){
	var val;
	if("getComputedStyle" in window){
		val = window.getComputedStyle(element,null)[attr];	
	}else{
		val = element.currentStyle[attr];	
	}
	return val;
}

但是由于不同浏览器返回的属性名不同，例如：

float：火狐，谷歌；

cssFloat：IE9-11;

styleFloat:IE6-8；

getStyle(box,"float");//IE9-11为undefined
getStyle(box,"styleFloat");//IE9-11、火狐、谷歌为undefined
getStyle(box,"cssFloat");//IE6-8为undefined

所以使用getPropertyValue来获取某一属性的值，但是不兼容IE6-8，但是IE本身有一个方法getAttribute。

getStyle优化为：

function win(element,attr){
	var val;
	if("getComputedStyle" in window){
		val = window.getComputedStyle(element,null).getPropertyValue(attr);	
	}else{
		val = element.currentStyle.getAttribute(attr);	
	}
	return val;
}

完美解决属性名不同的所造成的部分浏览器返回值为undefined。

但是其中height的值单位为em，返回值IE6-8的值单位是em，标准浏览器的值单位是px。

里面还有属性名或返回属性值不一致的问题，欢迎补充。