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 相关文章推荐
JS动画效果打开、关闭层的实现方法
May 09 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
Jun 13 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
小程序scroll-view组件实现滚动的示例代码
Sep 20 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
Apr 11 Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 Javascript
关于layui toolbar和template的结合使用方法
Sep 19 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
VueX模块的具体使用(小白教程)
Jun 05 Javascript
JS实现点击掉落特效
Jan 29 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
php 读取shell管道传输过来的内容
2010/03/01 PHP
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
使用array mutisort 实现按某字段对数据排序
2013/06/18 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
javascript smipleChart 简单图标类
2011/01/12 Javascript
UpdatePanel和Jquery冲突的解决方法
2013/04/01 Javascript
node.js中的fs.readFile方法使用说明
2014/12/15 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
Python中的startswith和endswith函数使用实例
2014/08/25 Python
python的即时标记项目练习笔记
2014/09/18 Python
python 简单的绘图工具turtle使用详解
2017/06/21 Python
Python numpy 提取矩阵的某一行或某一列的实例
2018/04/03 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
Python OpenCV视频截取并保存实现代码
2019/11/30 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
幼儿园保教管理制度
2014/02/03 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
公司承诺函范文
2015/01/21 职场文书
公司庆典欢迎词
2015/01/26 职场文书
葬礼主持词
2015/07/02 职场文书
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python
python 安全地删除列表元素的方法
2022/03/16 Python