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获取文本框中字符长度的代码
Sep 29 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 Javascript
js实现键盘Enter键提交表单的方法
May 27 Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 Javascript
webpack css加载和图片加载的方法示例
Sep 11 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
Mar 22 Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 Javascript
基于VUE实现判断设备是PC还是移动端
Jul 03 Javascript
vue实现标签云效果的示例
Nov 09 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的面向对象编程
2006/10/09 PHP
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
基于jquery 的一个progressbar widge
2010/10/29 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
js一维数组、多维数组和对象的混合使用方法
2016/04/03 Javascript
JS JSOP跨域请求实例详解
2016/07/04 Javascript
详解js中==与===的区别
2017/01/08 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
js实现复制功能(多种方法集合)
2018/01/06 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
Vue this.$router.push(参数)实现页面跳转操作
2020/09/09 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
python随机生成指定长度密码的方法
2015/04/04 Python
Python中list列表的一些进阶使用方法介绍
2015/08/15 Python
Python处理文本文件中控制字符的方法
2017/02/07 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
python 字典操作提取key,value的方法
2019/06/26 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
优秀学生干部推荐材料
2014/02/03 职场文书
大专应届毕业生求职信
2014/07/15 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
员工工作表扬信
2015/05/05 职场文书
个人原因辞职信模板
2015/05/13 职场文书
高中开学感言
2015/08/01 职场文书
调研报告的主要写法
2019/04/18 职场文书
Go web入门Go pongo2模板引擎
2022/05/20 Golang