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实现半透明遮罩层效果具体代码
Jun 06 Javascript
js实现瀑布流的一种简单方法实例分享
Nov 04 Javascript
javascript页面动态显示时间变化示例代码
Dec 18 Javascript
JavaScript基础知识及常用方法总结
Jan 10 Javascript
jquery实现页面常用的返回顶部效果
Mar 04 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
Aug 17 Javascript
浅谈node模块与npm包管理工具
Jan 03 Javascript
vue页面跳转后返回原页面初始位置方法
Feb 11 Javascript
vue 项目 iOS WKWebView 加载
Apr 17 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 Javascript
ES6数组与对象的解构赋值详解
Jun 14 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
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
PHP中非常有用却鲜有人知的函数集锦
2019/08/17 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
jQuery textarea的长度进行验证
2009/05/06 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
js实现上传图片预览的方法
2015/02/09 Javascript
通过点击jqgrid表格弹出需要的表格数据
2015/12/02 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
2016/05/16 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
Mac 上切换Python多版本
2017/06/17 Python
python 图片去噪的方法示例
2019/07/09 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
Spartoo芬兰:欧洲最大的网上鞋店
2016/08/28 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
个性大学生自我评价
2013/12/04 职场文书
资源工程专业毕业生求职信
2014/02/27 职场文书
《花瓣飘香》教学反思
2014/04/15 职场文书
物业品质提升方案
2014/06/08 职场文书
2015新学期开学寄语
2015/02/26 职场文书
法制教育主题班会
2015/08/13 职场文书
2016党校培训心得体会
2016/01/07 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书
python实现简单反弹球游戏
2021/04/12 Python
Python中os模块的简单使用及重命名操作
2021/04/17 Python