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


Posted in Javascript onAugust 09, 2016

本文实例讲述了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 While 循环基础教程
Apr 05 Javascript
Mootools 1.2教程 正则表达式
Sep 15 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
Mar 12 Javascript
简单的ajax连接库分享(不用jquery的ajax)
Jan 19 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
Jul 22 Javascript
JavaScript 闭包详细介绍
Sep 28 Javascript
微信小程序 UI与容器组件总结
Feb 21 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 Javascript
浅谈vue中.vue文件解析流程
Apr 24 Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 Javascript
JS控制下拉列表左右选择实例代码
May 08 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 #Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 #Javascript
教你JS中的运算符乘方、开方及变量格式转换
Aug 09 #Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 #Javascript
jQuery实现产品对比功能附源码下载
Aug 09 #Javascript
AngularJS利用Controller完成URL跳转
Aug 09 #Javascript
JavaScript实现广告弹窗效果
Aug 09 #Javascript
You might like
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
php pack与unpack 摸板字符字符含义
2009/10/29 PHP
php处理斐波那契数列非递归方法
2012/02/04 PHP
php简单创建zip压缩文件的方法
2016/04/30 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
2016/03/05 Javascript
Bootstrap Chart组件使用教程
2016/04/28 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
2017/01/11 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
Vue+Openlayers自定义轨迹动画
2020/09/24 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
在Django中使用Sitemap的方法讲解
2015/07/22 Python
Python3随机漫步生成数据并绘制
2018/08/27 Python
python 根据时间来生成唯一的字符串方法
2019/01/14 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
python远程邮件控制电脑升级版
2019/05/23 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
JupyterNotebook 输出窗口的显示效果调整实现
2020/09/22 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
播音主持女孩的自我评价分享
2013/11/20 职场文书
新闻编辑自荐书范文
2014/02/12 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
教师先进工作者事迹材料
2014/05/01 职场文书
职务任命书范本
2014/06/05 职场文书
法律进社区活动总结
2015/05/07 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis
Nginx报404错误的详细解决方法
2022/07/23 Servers