要想获取HTML元素的计算样式一直都存在很多的兼容问题,各浏览器都会存在一些差异,Firefox、webkit(Chrome,Safari)支持W3C标准的方法:getComputedStyle(),而IE6/7/8不支持标准的方法但是有私有的属性来实现:currentStyle,IE9和Opera两个都支持。有了这2个方法和属性基本上可以满足大多数要求了。
var getStyle = function( elem, type ){ return 'getComputedStyle' in window ? getComputedStyle(elem, null)[type] : elem.currentStyle[type]; };
但是对于自适应的宽度和高度使用currentStyle就没法获取到计算的值,只能返回auto,而getComputedStyle()就可以返回计算的值,解决这个问题有好几种办法。我之前想到的是用clientWidth/clientHeight减去padding的值,这样就可以在不支持标准方法的浏览器中获取到计算的宽度和高度。前几天看到司徒正美采用了另一种办法,使用getBoundingClientRect()方法获取到元素在页面中的位置,然后right减去left就是宽度,bottom减去top就是高度。我对他的代码做了一些小小的修改,最终代码如下:
var getStyle = function( elem, style ){ return 'getComputedStyle' in window ? getComputedStyle( elem, null )[style] : function(){ style = style.replace( /\-(\w)/g, function( $, $1 ){ return $1.toUpperCase(); }); var val = elem.currentStyle[style]; if( val === 'auto' && (style === "width" || style === "height") ){ var rect = elem.getBoundingClientRect(); if( style === "width" ){ return rect.right - rect.left + 'px'; }else{ return rect.bottom - rect.top + 'px'; } } return val; }(); }; // 调用该方法 var test = document.getElementById( 'test' ), // 获取计算的宽度 tWidth = getStyle( test, 'width' );
新的问题,如果元素的宽度或高度使用了em或%的单位,getComputedStyle()返回的值就会自动将em或%换成px的单位,currentStyle就不会,而如果是font-size使用em为单位,在Opera下返回的是0em,Opera真的很恐怖!
后来在使用发现中还有一些没想到的兼容问题,今天我对原来的代码进行了优化,并对一些常见的兼容问题进行了处理。
在javascript中“-”(中划线或连字符)代表的是减号,而在CSS中,许多样式属性都有这个符号,如padding-left、font-size等,所以在javascript中如果出现如下的代码就一个错误:
elem.style.margin-left = "20px";
正确的写法应该是:
elem.style.marginLeft = "20px";
这里需要把CSS的中划线去掉并把原来紧跟在中划线后的字母大写,俗称“驼峰式”写法,不管是使用javascript设置或是获取元素的CSS样式都应该是驼峰式的写法。但是不少对CSS熟悉而又对javascript不太熟悉的新手朋友总是会犯这种低级错误,使用replace的高级用法可以很简单的将CSS属性中的中划线替换成驼峰式的写法。
var newProp = prop.replace( /\-(\w)/g, function( $, $1 ){ return $1.toUpperCase(); });
对于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设置过样式的属性,可以使用下面的方法获取到元素的计算样式:
var height = elem.style.height;
这个方法比读取getComputedStyle或currentStyle中的属性值都要快,应该优先使用,当然前提条件就是样式是通过内联的写法设置的(使用javascript设置也是设置内联样式)。优化过的最终代码如下:
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="http://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 id="box"></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>
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@