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 相关文章推荐
javascript prototype,executing,context,closure
Dec 24 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
js动态创建表格,删除行列的小例子
Jul 20 Javascript
单击和双击事件的冲突处理示例代码
Apr 03 Javascript
js中将String转换为number以便比较
Jul 08 Javascript
javascript二维数组转置实例
Jan 22 Javascript
javascript文本模板用法实例
Jul 31 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
vue实现文件上传功能
Aug 13 Javascript
浅谈Vue中render中的h箭头函数
Nov 07 Javascript
js获取本日、本周、本月的时间代码
Feb 01 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
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
php4的session功能评述(二)
2006/10/09 PHP
php park、unpark、ord 函数使用方法(二进制流接口应用实例)
2010/10/19 PHP
php异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
解析php dirname()与__FILE__常量的应用
2013/06/24 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
AngularJS中的模块详解
2015/01/29 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
angular框架实现全选与单选chekbox的自定义
2017/07/06 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
Python实现的数据结构与算法之队列详解
2015/04/22 Python
python虚拟环境virualenv的安装与使用
2016/12/18 Python
python交互界面的退出方法
2019/02/16 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
python/Matplotlib绘制复变函数图像教程
2019/11/21 Python
python列表生成器迭代器实例解析
2019/12/19 Python
对tensorflow中的strides参数使用详解
2020/01/04 Python
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
大学专科生推荐信范文
2013/11/23 职场文书
自主招生自荐信范文
2013/12/04 职场文书
一名毕业生的自我鉴定
2013/12/04 职场文书
外企办公室竞聘演讲稿
2013/12/29 职场文书
市场营销职业生涯规划书范文
2014/01/12 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
审计班子对照检查材料
2014/08/27 职场文书
导游词格式
2015/02/13 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书