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 17 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
Aug 26 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
JavaScript中Array对象用法实例总结
Nov 29 Javascript
vue-cli+webpack记事本项目创建
Apr 01 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
Jun 26 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
Vue项目中跨域问题解决方案
Jun 05 Javascript
分享JS表单验证源码(带错误提示及密码等级)
Jan 05 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 Javascript
使用Cargo工具高效创建Rust项目
Aug 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
乐信RP2100的电路分析和打磨
2021/03/02 无线电
最贵的咖啡是怎么产生的,它的风味怎么样?
2021/03/04 新手入门
分享PHP入门的学习方法
2007/01/02 PHP
PHP读取ACCESS数据到MYSQL的代码
2011/05/11 PHP
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
微信封装的调用微信签名包的类库
2017/06/08 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
js创建元素(节点)示例
2014/01/02 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
python2.7实现爬虫网页数据
2018/05/25 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
Python3 JSON编码解码方法详解
2019/09/06 Python
django实现模板中的字符串文字和自动转义
2020/03/31 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
什么是反射
2012/03/17 面试题
自荐信格式简述
2014/01/25 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
新员工入职欢迎词
2015/01/23 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
小学生手册家长意见
2015/06/03 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
Java使用Unsafe类的示例详解
2021/09/25 Java/Android
【海涛七七解说】DCG第二周:DK VS 天禄
2022/04/01 DOTA