手写的一个兼容各种浏览器的javascript getStyle函数(2)

var getStyle = function( elem, p ){
 var rPos = /^(left|right|top|bottom)$/,
 ecma = "getComputedStyle" in window,
 // 将中划线转换成驼峰式 如：padding-left => paddingLeft
 p = p.replace( /\-(\w)/g, function( $, $1 ){
 return $1.toUpperCase();
 });
 // 对float进行处理  
 p = p === "float" ? ( ecma ? "cssFloat" : "styleFloat" ) : p;

 return !!elem.style[p] ?
 elem.style[p] :
 ecma ?
 function(){
 var val = getComputedStyle( elem, null )[p];
 // 处理top、right、bottom、left为auto的情况
 if( rPos.test(p) && val === "auto" ){
 return "0px";
 }
 return val;
 }() :
 function(){
 var <a href="https://wirelesscasinogames.com">wirelesscasinogames.com</a> val = elem.currentStyle[p];
 // 获取元素在IE6/7/8中的宽度和高度
  if( (p === "width" || p === "height") && val === "auto" ){
  var rect = elem.getBoundingClientRect();    
  return ( p === "width" ? rect.right - rect.left : rect.bottom - rect.top ) "px";
  }
 // 获取元素在IE6/7/8中的透明度
  if( p === "opacity" ){
  var filter = elem.currentStyle.filter;
  if( /opacity/.test(filter) ){
   val = filter.match( /\d / )[0] / 100;
  return (val === 1 || val === 0) ? val.toFixed(0) : val.toFixed(1);
  }
  else if( val === undefined ){
  return "1";
  }
  }
  // 处理top、right、bottom、left为auto的情况
  if( rPos.test(p) && val === "auto" ){
  return "0px";
  }
  return val;
 }();
};

下面是调用示例：

复制代码 代码如下:

<style>
.box{
 width:500px;
 height:200px;
 background:#000;
 filter:alpha(opacity=60);
 opacity:0.6;
}
</style>

<div></div>

<script>
var box = document.getElementById( "box" );

alert( getStyle(box, "width") ); // "500px"
alert( getStyle(box, "background-color") ); // "rgb(0, 0, 0)" / "#000"
alert( getStyle(box, "opacity") ); // "0.6"
alert( getStyle(box, "float") ); // "none"
</script>

您可能感兴趣的文章: