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

更新时间：2016年08月09日 15:25:26 作者：modun

这篇文章主要介绍了JS获取一个未知DIV高度的方法,涉及javascript针对页面元素属性的动态操作相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了JS获取一个未知DIV高度的方法。分享给大家供大家参考，具体如下：

通过元素的clientHeight属性能够得到元素的高度,如：

var height = element.clientHeight;

这种做法的局限：

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};
}

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

小程序scroll-view安卓机隐藏横向滚动条的实现详解
这篇文章主要介绍了小程序scroll-view安卓机隐藏横向滚动条的实现详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-05-05
js清空form表单中的内容示例
这篇文章主要介绍了js如何清空form表单中的内容，下面有个不错的示例，大家可以参考下
2014-05-05
再谈querySelector和querySelectorAll的区别与联系
先按W3C的规范来说这两个方法应该返回的内容吧，大家先看下官方的解释，然后根据需要选择使用
2012-04-04
深入理解JS中的变量及作用域、undefined与null
本篇文章主要是对JS中的变量及作用域、undefined与null进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-03-03
面试判断元素是否在可视区域中IntersectionObserver详解
这篇文章主要为大家介绍了判断元素是否在可视区域中IntersectionObserver面试详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
如何正确理解javascript的模块化
模块化在项目中十分的重要，一个复杂的项目肯定有很多相似的功能模块，如果每次都需要重新编写模块肯定既费时又耗力。但是引用别人编写模块的前提是要有统一的“打开姿势”，如果每个人有各自的写法，那么肯定会乱套，下面介绍几种JS的模块化的规范。
2017-03-03
js为数字添加逗号并格式化数字的代码
数字添加逗号的方法有很多，在本将为大家介绍下使用js来实现，具体如下，感兴趣的朋友可以参考下，希望对大家有所帮助
2013-08-08
js console.log打印对象时属性缺失的解决方法
在编写代码时，我们常常用 console.log() 的方式将信息在控制台中打印出来以帮助我们进行前端调试，那么console.log打印对象时属性缺失怎么办？下面我们就一起来了解一下解决方法
2019-05-05
小程序两种滚动公告栏的实现方法
这篇文章主要介绍了小程序两种滚动公告栏的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
动态规划之使用备忘录来改进Javascript函数
这篇文章主要介绍了动态规划之使用备忘录来改进Javascript函数，动态规划它既是一种数学优化方法，也是一种计算机编程方法，下文相关资料介绍需要的小伙伴可以参考一下
2022-04-04