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 相关文章推荐
Jquery Select操作方法集合脚本之家特别版
May 17 Javascript
用jquery设置按钮的disabled属性的实现代码
Nov 28 Javascript
JS正则中的RegExp对象对象
Nov 07 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
JavaScript必知必会(三) String .的方法来自何方
Jun 08 Javascript
微信小程序 Template详解及简单实例
Jan 05 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
详解JavaScript中return的用法
May 08 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
May 26 Javascript
jquery的 filter()方法使用教程
Mar 22 jQuery
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 Javascript
javascript实现简易的计算器
Jan 17 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关联数组的10个操作技巧
2013/01/21 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
php array_map()函数实例用法
2021/03/03 PHP
javascript中简单的进制转换代码实例
2013/10/26 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
vue如何判断dom的class
2018/04/26 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
从零学python系列之教你如何根据图片生成字符画
2014/05/23 Python
Python创建日历实例
2014/08/21 Python
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
Python使用爬虫猜密码
2016/02/19 Python
python中PIL安装简单教程
2016/04/21 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
python manage.py runserver流程解析
2019/11/08 Python
python传到前端的数据,双引号被转义的问题
2020/04/03 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
详解用selenium来下载小姐姐图片并保存
2021/01/26 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
人身损害赔偿协议书范本
2014/09/27 职场文书
骨干教师事迹材料
2014/12/17 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
求职导师推荐信范文
2015/03/27 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书