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 dialog 异步调用ashx,webservice数据的代码
Aug 03 Javascript
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
js中生成map对象的方法
Jan 09 Javascript
jQuery实现带玻璃流光质感的手风琴特效
Nov 20 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
node实现简单的反向代理服务器
Jul 26 Javascript
vue内置组件keep-alive事件动态缓存实例
Oct 30 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
VFP与其他应用程序的集成
2006/10/09 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
php数组键名技巧小结
2015/02/17 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
PHP 文件上传限制问题
2019/09/01 PHP
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
处理JavaScript值为undefined的7个小技巧
2020/07/28 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
Python实现的多线程http压力测试代码
2017/02/08 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
Python多继承原理与用法示例
2018/08/23 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式,官方实例)
2021/01/10 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
置业顾问岗位职责
2014/03/02 职场文书
给学校的建议书
2014/03/12 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
MongoDB数据库的安装步骤
2021/06/18 MongoDB