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的map与get方法详解
Nov 04 Javascript
Javascript中设置默认参数值示例
Sep 11 Javascript
Javascript 是你的高阶函数(高级应用)
Jun 15 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 Javascript
JavaScript知识点整理
Dec 09 Javascript
SWFUpload多文件上传及文件个数限制的方法
May 31 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
使用node.js实现微信小程序实时聊天功能
Aug 13 Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 Javascript
JavaScript canvas实现流星特效
May 20 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之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
PHP处理Json字符串解码返回NULL的解决方法
2014/09/01 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
PHP中单例模式与工厂模式详解
2017/02/17 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
[原创]保存的js无法执行的解决办法
2007/02/25 Javascript
Dom 是什么的详细说明
2010/10/25 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
2014/06/09 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
Python创建系统目录的方法
2015/03/11 Python
python回调函数用法实例分析
2015/05/09 Python
pycharm远程调试openstack代码
2017/11/21 Python
Python实现备份MySQL数据库的方法示例
2018/01/11 Python
Python中optparser库用法实例详解
2018/01/26 Python
Python玩转Excel的读写改实例
2019/02/22 Python
Python socket模块ftp传输文件过程解析
2019/11/05 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
小学六年级学生评语
2014/04/22 职场文书
2014年售后服务工作总结
2014/11/18 职场文书
投标售后服务承诺书
2015/04/29 职场文书
党支部综合考察意见
2015/06/01 职场文书
民事调解协议书
2016/03/21 职场文书
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby