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通用函数
May 09 Javascript
js利用与或运算符优先级实现if else条件判断表达式
Apr 15 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
Sep 06 Javascript
JavaScript新窗口与子窗口传值详解
Feb 11 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
JavaScript中的原型prototype属性使用详解
Jun 05 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
详解VUE的状态控制与延时加载刷新
Mar 27 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 Javascript
Vue实现导航栏的显示开关控制
Nov 01 Javascript
微信小程序利用云函数获取手机号码
Dec 17 Javascript
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
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+MYSQL的文章管理系统(一)
2006/10/09 PHP
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
PHP array_push 数组函数
2009/12/26 PHP
discuz的php防止sql注入函数
2011/01/17 PHP
PHP 年龄计算函数(精确到天)
2012/06/07 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)
2014/02/24 PHP
原生js实现跨浏览器获取鼠标按键的值
2013/04/08 Javascript
js捕获鼠标滚轮事件代码
2013/12/16 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
JavaScript中原型和原型链详解
2015/02/11 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
2015/09/05 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
vue-quill-editor富文本编辑器简单使用方法
2018/09/21 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
详解Python中break语句的用法
2015/05/14 Python
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
python版微信跳一跳游戏辅助
2018/01/11 Python
Python内建模块struct实例详解
2018/02/02 Python
Python之指数与E记法的区别详解
2019/11/21 Python
pyspark 随机森林的实现
2020/04/24 Python
竞聘副主任科员演讲稿
2014/01/11 职场文书
医院工作检讨书范文
2014/02/10 职场文书
2014中考励志标语
2014/06/05 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
《包身工》教学反思
2016/02/23 职场文书
MySQL中varchar和char类型的区别
2021/11/17 MySQL