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的loading效果实现代码
Nov 05 Javascript
JavaScript内核之基本概念
Oct 21 Javascript
js自动查找select下拉的菜单并选择(示例代码)
Feb 26 Javascript
超赞的动手创建JavaScript框架的详细教程
Jun 30 Javascript
location.hash保存页面状态的技巧
Apr 28 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 Javascript
jstl中判断list中是否包含某个值的简单方法
Oct 14 Javascript
JS多物体实现缓冲运动效果示例
Dec 20 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
超全面的vue.js使用总结
Feb 12 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
Sep 02 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
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 保留小数点
2009/04/21 PHP
PHP实现变色验证码实例
2014/01/06 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
JavaScript中原型和原型链详解
2015/02/11 Javascript
Javascript基础之数组的使用
2016/05/13 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
vue项目中跳转到外部链接的实例讲解
2018/09/20 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
[00:50]深扒TI7聊天轮盘语音出处6
2017/05/11 DOTA
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
浅谈Scrapy网络爬虫框架的工作原理和数据采集
2019/02/07 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
详解python播放音频的三种方法
2019/09/23 Python
Python JSON编解码方式原理详解
2020/01/20 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
Unix控制后台进程都有哪些进程
2016/09/22 面试题
公务员年总结的自我评价
2013/10/25 职场文书
会计与审计毕业生自荐信范文
2013/12/30 职场文书
家长对孩子评语
2014/01/30 职场文书
2014庆六一活动方案
2014/03/02 职场文书
学历公证书范本
2014/04/09 职场文书
群教个人对照检查材料
2014/08/20 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
离婚协议书标准格式
2014/10/04 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers