js获取计算样式

上一篇文章 js控制样式 写了js控制样式的细节，主要是涉及内联样式。

然而，有些时候我们需要的是某个元素最终的样式（计算样式）。这篇来讲一讲js获取计算样式

/**
 * @brief 获取元素的计算样式（最终的样式）
 * @author kenshinlin 2011/11/30
 * @param elem 要计算样式的元素,dom对象或字符串（id号）
 * @pro 要获取的样式属性,这个字符串是骆驼型的，如marginLeft而不是margin-left
 */
function getStyle(elem,pro)  
{  
	elem = ('string'==typeof elem)?document.getElementById('elem'):elem;
	if(!elem) return null;
	if(elem.style[pro])  //内联
		return elem.style[pro];  
	else if(elem.currentStyle)  //IE
	{  
		return elem.currentStyle[pro];    
	} 
	else if(window.getComputedStyle){  //W3C标准
		var s=window.getComputedStyle(elem,null);
		return s[pro];
	}
	else if(document.defaultView&&document.defaultView.getComputedStyle) //FF,CHROME等
	{  
		pro=pro.replace(/([A-Z])/g,"-$1"); //如marginLeft转为margin-Left
		pro=pro.toLowerCase();   //再转为小写margin-left
		var s=document.defaultView.getComputedStyle(elem,"");  
		return s&&s.getPropertyValue(pro);  
	}  
	else return null;
} 

PS：代码部分参考了一位网友，但具体的链接又忘了。

注意：fontFamily可能获取的是类似于“arial,helvetica,sans-serif “的值；如果一个元素不是绝对定位，其计算样式返回auto。