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

前端技术 2023/08/09 JavaScript

要想获取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\' );

本文地址：https://www.stayed.cn/item/703

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案