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 相关文章推荐
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
Dec 12 Javascript
jquery网页元素拖拽插件效果及实现
Aug 05 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
js实现div闪烁原理及实现代码
Jun 24 Javascript
JS实现让访问者自助选择网页文字颜色的方法
Feb 24 Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
Django+Vue.js搭建前后端分离项目的示例
Aug 07 Javascript
vue页面切换到滚动页面显示顶部的实例
Mar 13 Javascript
详解开发react应用最好用的脚手架 create-react-app
Apr 24 Javascript
ES6关于Promise的用法详解
May 07 Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
强烈推荐:php.ini中文版(1)
2006/10/09 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
JavaScript模拟重力状态下抛物运动的方法
2015/03/03 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
JS JSOP跨域请求实例详解
2016/07/04 Javascript
js修改onclick动作的四种方法(推荐)
2016/08/18 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
详解vue-router 路由元信息
2017/09/13 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
Python中super函数的用法
2017/11/17 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
Python matplotlib学习笔记之坐标轴范围
2019/06/28 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
麦当劳印度网上订餐:McDelivery
2020/03/16 全球购物
安全资金保障制度
2014/01/23 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
党政领导班子四风问题对照检查材料思想汇报
2014/10/02 职场文书
2015年监理工作总结范文
2015/04/07 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
导游词之安徽巢湖
2019/12/26 职场文书