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打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
js 未结束的字符串常量错误解决方法
Jun 13 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 Javascript
瀑布流布局代码一例
Apr 11 Javascript
JavaScript的作用域和块级作用域概念理解
Sep 21 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
微信小程序:数据存储、传值、取值详解
May 07 Javascript
jQuery实现高级检索功能
May 28 jQuery
JS字符串与二进制的相互转化实例代码详解
Jun 28 Javascript
JavaScript获取当前url路径过程解析
Dec 27 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 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+ajax注册实时验证功能
2016/07/20 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
img标签中onerror用法
2009/08/13 Javascript
jQuery隔行变色与普通JS写法的对比
2013/04/21 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
taro小程序添加骨架屏的实现代码
2019/11/15 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
2020/03/26 Javascript
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
Python及PyCharm下载与安装教程
2017/11/18 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
python 字符串常用函数详解
2019/09/11 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
python 实现目录复制的三种小结
2019/12/04 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
Python多线程的退出控制实现
2020/08/10 Python
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
心得体会范文
2014/01/04 职场文书
植树节标语
2014/06/27 职场文书
质量保证书格式
2015/02/27 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
教你怎么用PyCharm为同一服务器配置多个python解释器
2021/05/31 Python