手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
要想获取HTML元素的计算样式一直都存在很多的兼容问题，各浏览器都会存在一些差异，Firefox、webkit(Chrome,Safari)支持W3C标准的方法：getComputedStyle()，而IE6/7/8不支持标准的方法但是有私有的属性来实现：currentStyle，IE9和Opera两个都支持。有了这2个方法和属性基本上可以满足大多数要求了。
vargetStyle=function(elem,type){
return'getComputedStyle'inwindow?getComputedStyle(elem,null)[type]:elem.currentStyle[type];
};
但是对于自适应的宽度和高度使用currentStyle就没法获取到计算的值，只能返回auto，而getComputedStyle()就可以返回计算的值，解决这个问题有好几种办法。我之前想到的是用clientWidth/clientHeight减去padding的值，这样就可以在不支持标准方法的浏览器中获取到计算的宽度和高度。前几天看到司徒正美采用了另一种办法，使用getBoundingClientRect()方法获取到元素在页面中的位置，然后right减去left就是宽度，bottom减去top就是高度。我对他的代码做了一些小小的修改，最终代码如下：
vargetStyle=function(elem,style){
return'getComputedStyle'inwindow?
getComputedStyle(elem,null)[style]:
function(){
style=style.replace(/\-(\w)/g,function($,$1){
return$1.toUpperCase();
});
varval= elem.currentStyle[style];
if(val==='auto'&&(style==="width"||style==="height")){ varrect= elem.getBoundingClientRect(); if( style==="width"){ returnrect.right-rect.left+'px'; }else{ returnrect.bottom-rect.top+'px'; } } returnval; }(); };
//调用该方法 vartest=document.getElementById('test'), //获取计算的宽度 tWidth=getStyle(test,'width');