js获取隐藏元素的宽高


Posted in Javascript onFebruary 24, 2017

获取隐藏元素(display:none)的物理尺寸

问题及场景

假如我们有这样一个输入框,点击能展开选择。如下图:

js获取隐藏元素的宽高

js获取隐藏元素的宽高js获取隐藏元素的宽高

在这里输入框和下方的展开区域是分离的,独立的两个控件!初始状态下面的可选框是隐藏的(ng-show=false)

展开区域中可折叠组件accordion(对应图中省份,排序字段,短消息部分)的高度是随着数据自适应撑开,点击accordion折叠收缩时有一个高度变化的动画效果!

在计算accordion的高度时却无法获取数据节点元素的高度,导致accordion的高度为0,无法折叠!

原因

在一个隐藏的div元素节点中无法获取它子元素的物理尺寸!即输入框下面的展开区域还是隐藏时,accordion控件无法获取数据DOM节点元素的高度.

解决方案

JQuey中height()和width()方法获取隐藏元素的尺寸。但是这只能获取隐藏元素的高度,无法获取内部子元素的高度!!!

解决方案:JS控制css设置元素的隐藏与显示

代码思路:显示隐藏元素(去掉元素的隐藏方式,css属性display:none或者某些样式类) ---> 计算目标元素高度 ---> 还原隐藏元素的样式

存在问题:

1.元素在切换显示与隐藏时会闪烁 ----> 解决办法:利用css中visibility:hidden不可见属性,visibility:hidden隐藏的元素有物理尺寸。

 如果高度的计算能在极短的时间内完成,此闪烁现象可以忽略不计!

2.元素显示后会占据物理尺寸可能影响其它元素位置 ----> 解决办法:将这个隐藏的元素移出屏幕或者脱离文档流( position: absolute)。

示例代码如下:

调用getSize方法传入被隐藏元素element,以及需要获取尺寸的目标元素就能返回targetEl的尺寸了!!!

//获取元素的物理尺寸,参数:element隐藏的元素节点;targetEl需要获取尺寸的目标元素
this.getSize = function(element,targetEl) {
 //增加隐藏,防止element在取消隐藏时闪烁; position: absolute;和display:none看需要是否加上
 var _addCss = { visibility: 'hidden' };
 var _oldCss = {};
 var _width;
 var _height;
 if (this.getStyle(element, "display") != "none") {
  return { width: !!targetEl ? targetEl.offsetWidth : element.offsetWidth , height: !!targetEl ? targetEl.offsetHeight : element.offsetHeight };
 }
 for (var i in _addCss) {
  _oldCss[i] = this.getStyle(element, i);
 }
 this.setStyle(element, _addCss);
 //这里是通过angularjs的ng-show指令隐藏元素的,去掉ng-hide样式类就可以取消隐藏
 var _isNgHide = element.classList.contains("ng-hide");
 _isNgHide && element.classList.remove("ng-hide");
 _width = !!targetEl ? targetEl.offsetWidth : element.offsetWidth;
 _height =!!targetEl ? targetEl.offsetHeight : element.offsetHeight;
 //还原之前的样式,class
 this.setStyle(element, _oldCss);
 _isNgHide && element.classList.add("ng-hide");
 return { width: _width, height: _height };
};
this.getStyle = function(element, styleName) {
 return element.style[styleName] ? element.style[styleName] : element.currentStyle ? element.currentStyle[styleName] : window.getComputedStyle(element, null)[styleName];
};
this.setStyle = function(element, obj){
 if (angular.isObject(obj)) {
  for (var property in obj) {
   var cssNameArr = property.split("-");
   for (var i = 1,len=cssNameArr.length; i < len; i++) {
    cssNameArr[i] = cssNameArr[i].replace(cssNameArr[i].charAt(0), cssNameArr[i].charAt(0).toUpperCase());
   }
   var cssName = cssNameArr.join("");
   element.style[cssName] = obj[property];
  }
 }
 else if (angular.isString(obj)) {
  element.style.cssText = obj;
 }
};

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
FileUpload上传图片(图片不变形)
Aug 05 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
Oct 29 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
Jun 04 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
vue实现商城购物车功能
Nov 27 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
May 13 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
详解js实时获取并显示当前时间的方法
May 10 Javascript
JsonProperty 的使用方法详解
Oct 11 Javascript
javascript自定义右键菜单插件
Dec 16 Javascript
js css自定义分页效果
Feb 24 #Javascript
jQuery快速高效制作网页交互特效
Feb 24 #Javascript
Angular.js自定义指令学习笔记实例
Feb 24 #Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 #Javascript
JavaScript和jQuery制作光棒效果
Feb 24 #Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 #Javascript
微信小程序实现实时圆形进度条的方法示例
Feb 24 #Javascript
You might like
php FLEA中二叉树数组的遍历输出
2012/09/26 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
Javascript 类型转换方法
2010/10/24 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
2010/11/30 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
javascript与cookie 的问题详解
2013/11/11 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
python实现在字符串中查找子字符串的方法
2015/07/11 Python
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
Python将8位的图片转为24位的图片实现方法
2018/10/24 Python
对python csv模块配置分隔符和引用符详解
2018/12/12 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
python Gabor滤波器讲解
2020/10/26 Python
PyCharm最新激活码(2020/10/27全网最新)
2020/10/27 Python
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
写给保洁员表扬信
2014/01/08 职场文书
公司活动邀请函
2014/01/24 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书