手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)


Posted in Javascript onJune 06, 2014

要想获取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 相关文章推荐
jquery 缓存问题的几个解决方法
Nov 11 Javascript
jQuery实现DIV层收缩展开的方法
Feb 27 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 Javascript
关于vue-resource报错450的解决方案
Jul 24 Javascript
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 Javascript
Vuepress 搭建带评论功能的静态博客的实现
Feb 17 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 Javascript
在vue中使用Base64转码的案例
Aug 07 Javascript
JS实现简单的九宫格抽奖
Jun 28 Javascript
jquery进行数组遍历如何跳出当前的each循环
Jun 05 #Javascript
js检验密码强度(低中高)附图
Jun 05 #Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 #Javascript
js如何判断用户是否是用微信浏览器
Jun 05 #Javascript
如何获取网站icon有哪些可行的方法
Jun 05 #Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 #Javascript
网页右下角弹出窗体实现代码
Jun 05 #Javascript
You might like
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
js瀑布流布局的实现
2020/06/28 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
python实现保存网页到本地示例
2014/03/16 Python
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
HTML5和CSS3实例教程总结(推荐)
2016/07/18 HTML / CSS
DVF官方网站:美国时装界尊尚品牌
2017/08/29 全球购物
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
台湾三立电视电商平台:电电购
2019/09/09 全球购物
公司面试感谢信
2014/02/01 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
感谢信怎么写
2015/01/21 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP
Java对文件的读写操作方法
2022/04/29 Java/Android