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程序设计有所帮助。
相关文章
这篇文章主要介绍了微信小程序获取当前位置和城市名的思路,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-11-11
这篇文章主要给大家介绍了关于three.js着色器材质内置变量的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用three.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2020-08-08
下面小编就为大家带来一篇js前端实现多图图片上传预览的两个方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
Three.js是一个JavaScript库,用于在Web浏览器中创建3D Web图形,下面这篇文章主要给大家介绍了关于three.js安装和使用的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要给大家介绍了利用Javascript计算二维数组重复值的方法，文中给出了详细的示例代码，相信对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。2016-12-12
这篇文章主要为大家详细介绍了JS画布动态实现黑客帝国背景效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
这篇文章主要介绍了基于JavaScript的数据结构队列动画实现示例解析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
JavaScript中使用arguments获得函数传参个数实例
这篇文章主要介绍了JavaScript中使用arguments获得函数传参个数实例,本文用了多个例子来讲解arguments的使用,需要的朋友可以参考下2014-08-08
这篇文章主要介绍了微信小程序实现拖动悬浮图标效果,小程序上是实现拖动图标,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-04-04
这篇文章给大家分享jfinal与bootstrap之间的登录跳转，具体内容包含有点击登录弹出模态框、点击登录确认按钮后的validate、jfinal的validate、jfinal的session管理、ajax请求与返回信息处理、页面间智能跳转。感兴趣的朋友跟着小编一起看看吧2015-09-09
最新评论