获取元素属性函数getStyle的优化

在javascript中“-”(中划线或连字符)代表的是减号，而在CSS中，许多样式属性都有这个符号，如padding-left、font-size等，所以在javascript中如果出现如下的代码就一个错误：
1    elem.style.margin-left = '20px';

正确的写法应该是：
1    elem.style.marginLeft = '20px';

这里需要把CSS的中划线去掉并把原来紧跟在中划线后的字母大写，俗称“驼峰式”写法，不管是使用javascript设置或是获取元素的CSS样式都应该是驼峰式的写法。但是不少对CSS熟悉而又对javascript不太熟悉的新手朋友总是会犯这种低级错误，使用replace的高级用法可以很简单的将CSS属性中的中划线替换成驼峰式的写法。
1    var newProp = prop.replace( /\-(\w)/g, function( $, $1 ){
2        return $1.toUpperCase();
3    });

对于float，在javascript中属于保留字，在javascript中设置或获取元素的float的值，都有其他的代替写法，在标准浏览器中为cssFloat，而在IE6/7/8中为styleFloat。

如果top、right、bottom、left没有一个显式的值，在获取这些值的时候部分浏览器会返回一个auto，虽然auto这个值是一个合法的CSS属性值，但绝不是我们想要的结果，而应该是0px。

在IE6/7/8中要设置元素的透明度需要用到滤镜、如：filter:alpha(opacity=60)，对于标准浏览器直接设置opacity即可，IE9两种写法都支持，我对获取元素的透明度也做了兼容处理，只要使用opacity就可以获取到所有浏览器元素的透明度的值。

在IE6/7/8中获取元素的宽度和高度已经在上篇文中介绍过了，这里就不再复述了。还有一个需要注意的地方就是，如果元素的样式是使用style内联的写法，或者是已经使用javascript设置过样式的属性，可以使用下面的方法获取到元素的计算样式：
1    var height = elem.style.height;

这个方法比读取getComputedStyle或currentStyle中的属性值都要快，应该优先使用，当然前提条件就是样式是通过内联的写法设置的(使用javascript设置也是设置内联样式)。优化过的最终代码如下：
01    var getStyle = function( elem, p ){
02      var rPos = /^(left|right|top|bottom)$/,
03        ecma = 'getComputedStyle' in window,
04      // 将中划线转换成驼峰式 如：padding-left => paddingLeft
05      p = p.replace( /\-(\w)/g, function( $, $1 ){
06        return $1.toUpperCase();
07      });
08      // 对float进行处理
09      p = p === 'float' ? ( ecma ? 'cssFloat' : 'styleFloat' ) : p;
10    
11      return !!elem.style[p] ?
12        elem.style[p] :
13        ecma ?
14        function(){
15          var val = getComputedStyle( elem, null )[p];
16          // 处理top、right、bottom、left为auto的情况
17          if( rPos.test(p) && val === 'auto' ){
18            return '0px';
19          }
20          return val;
21        }() :
22        function(){
23          var val =  elem.currentStyle[p];
24              // 获取元素在IE6/7/8中的宽度和高度
25          if( (p === "width" || p === "height") && val === 'auto' ){
26            var rect =  elem.getBoundingClientRect();
27            return ( p === 'width' ? rect.right - rect.left : rect.bottom - rect.top ) + 'px';
28          }
29        // 获取元素在IE6/7/8中的透明度
30          if( p === 'opacity' ){
31            var filter = elem.currentStyle.filter;
32            if( /opacity/.test(filter) ){
33              val = filter.match( /\d+/ )[0] / 100;
34              return (val === 1 || val === 0) ? val.toFixed(0) : val.toFixed(1);
35            }
36            else if( val === undefined ){
37              return '1';
38            }
39          }
40          // 处理top、right、bottom、left为auto的情况
41          if( rPos.test(p) && val === 'auto' ){
42            return '0px';
43          }
44          return val;
45        }();
46    };

下面是调用示例：
01    <style>
02    .box{
03      width:500px;
04      height:200px;
05      background:#000;
06      filter:alpha(opacity=60);
07      opacity:0.6;
08    }
09    </style>
10    
11    <div id="box"></div>
12    
13    <script>
14    var box = document.getElementById( 'box' );
15    
16    alert( getStyle(box, 'width') ); // '500px'
17    alert( getStyle(box, 'background-color') ); // 'rgb(0, 0, 0)' / '#000'
18    alert( getStyle(box, 'opacity') ); // '0.6'
19    alert( getStyle(box, 'float') ); // 'none'
20    </script>
原载于：雨夜带刀’s Blog
本文链接：http://stylechen.com/getstyle2.html
如需转载请以链接形式注明原载与原文地址。

转载于:https://www.cnblogs.com/ginowang42/archive/2012/03/07/2383740.html