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 相关文章推荐
JavaScript 创建运动框架的实现代码
May 08 Javascript
js 获取radio按钮值的实例
Aug 17 Javascript
jQuery设置div一直在页面顶部显示的方法
Oct 24 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 Javascript
详解JS中的快速排序与冒泡
Jan 10 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
如何在Vue.JS中使用图标组件
Aug 04 Javascript
OpenLayers实现图层切换控件
Sep 25 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
Nov 09 Javascript
解决vue init webpack 下载依赖卡住不动的问题
Nov 09 Javascript
JavaScript 事件捕获冒泡与捕获详情
Nov 11 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.MVC的模板标签系统(二)
2006/09/05 PHP
php将数据库导出成excel的方法
2010/05/07 PHP
通达OA公共代码 php常用检测函数
2011/12/14 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
基于jQuery的消息提示插件 DivAlert之旅(二)
2010/04/01 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
前端微信支付js代码
2016/07/25 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
Ajax基础知识详解
2017/02/17 Javascript
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
elementui的默认样式修改方法
2018/02/23 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
微信小程序通过一个json实现分享朋友圈图片
2019/09/03 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
Python计算字符宽度的方法
2016/06/14 Python
python 实现判断ip连通性的方法总结
2018/04/22 Python
python+django+rest框架配置创建方法
2019/08/31 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
处理HTML5新标签的浏览器兼容版问题
2017/03/13 HTML / CSS
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
Java中的基本数据类型所占存储空间大小固定的吗
2012/02/15 面试题
高级护理实习生自荐信
2013/09/28 职场文书
《月球之谜》教学反思
2014/04/10 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
2015年三万活动总结
2015/03/25 职场文书
小英雄雨来观后感
2015/06/09 职场文书
python实现过滤敏感词
2021/05/08 Python
Nginx配置使用详解
2022/07/07 Servers