JS如何获取一个未知DIV高度的方法

最新推荐文章于 2021-10-21 14:24:44 发布

lokvwagy

最新推荐文章于 2021-10-21 14:24:44 发布

阅读量545

点赞数

这种做法的局限：

1. 如果元素的display属性设置为none, 那么得到的结果为0

2. 在safari浏览器中，需要使用：element.offsetHeight得到实际高度，这是safari浏览器的bug

下面是Prototype提供的方法，能够兼容各种浏览器，同时在元素隐藏的情况下也能正确得到元素尺寸，供参考：

 
      getDimensions:  
      function 
      (element) { 
     
      element = $(element); 
     
      var  
      display = $(element).getStyle( 
      'display' 
      ); 
     
      if  
      (display !=  
      'none'  
      && display !=  
      null 
      )  
      // Safari bug 
     
      return  
      {width: element.offsetWidth, height: element.offsetHeight}; 
     
      // All *Width and *Height properties give 0 on elements with display none, 
     
      // so enable the element temporarily 
     
      var  
      els = element.style; 
     
      var  
      originalVisibility = els.visibility; 
     
      var  
      originalPosition = els.position; 
     
      var  
      originalDisplay = els.display; 
     
      els.visibility =  
      'hidden' 
      ; 
     
      els.position =  
      'absolute' 
      ; 
     
      els.display =  
      'block' 
      ; 
     
      var  
      originalWidth = element.clientWidth; 
     
      var  
      originalHeight = element.clientHeight; 
     
      els.display = originalDisplay; 
     
      els.position = originalPosition; 
     
      els.visibility = originalVisibility; 
     
      return  
      {width: originalWidth, height: originalHeight}; 
     
      }