手写的一个兼容各种浏览器的javascriptgetStyle函数(获取元素的样式)_javascript技巧
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了手写的一个兼容各种浏览器的javascriptgetStyle函数(获取元素的样式)_javascript技巧，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6275字，纯文字阅读大概需要9分钟。
内容图文
要想获取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中如果出现如下的代码就一个错误：
正确的写法应该是：
这里需要把CSS的中划线去掉并把原来紧跟在中划线后的字母大写，俗称“驼峰式”写法，不管是使用javascript设置或是获取元素的CSS样式都应该是驼峰式的写法。但是不少对CSS熟悉而又对javascript不太熟悉的新手朋友总是会犯这种低级错误，使用replace的高级用法可以很简单的将CSS属性中的中划线替换成驼峰式的写法。
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 wirelesscasinogames.com 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;
}();
};
下面是调用示例：
内容总结
以上是互联网集市为您收集整理的手写的一个兼容各种浏览器的javascriptgetStyle函数(获取元素的样式)_javascript技巧全部内容，希望文章能够帮你解决手写的一个兼容各种浏览器的javascriptgetStyle函数(获取元素的样式)_javascript技巧所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。