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 实现的点击复制代码
Mar 24 Javascript
jscript之Read an Excel Spreadsheet
Jun 13 Javascript
javascrip关于继承的小例子
May 10 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
仿百度换肤功能的简单实例代码
Jul 11 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
jquery判断页面网址是否有效的两种方法
Dec 11 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
Mar 08 Javascript
动态加载JavaScript文件的3种方式
May 05 Javascript
js+css实现扇形导航效果
Aug 18 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
世界第一个无线广播电台 KDKA
2021/03/01 无线电
php实现字符串反转输出的方法
2015/03/14 PHP
php通过分类列表产生分类树数组的方法
2015/04/20 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
JavaScript数据类型详解
2015/04/01 Javascript
老生常谈jquery中detach()和remove()的区别
2017/03/02 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
基于angular2 的 http服务封装的实例代码
2017/06/29 Javascript
微信小程序实现鼠标拖动效果示例
2017/12/01 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
小程序分享模块超级详解(推荐)
2019/04/10 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
JS eval代码快速解密实例解析
2020/04/23 Javascript
用Python实现命令行闹钟脚本实例
2016/09/05 Python
浅谈对yield的初步理解
2017/05/29 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
python判断一个对象是否可迭代的例子
2019/07/22 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
请解释virtual关键字的含义
2015/06/17 面试题
中专生自我鉴定
2013/12/17 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
2015年高考寄语或鼓励的话
2015/03/23 职场文书
美丽心灵观后感
2015/06/01 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
nginx 反向代理之 proxy_pass的实现
2021/03/31 Servers