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 写类方式之六
Jul 05 Javascript
Jquery实现搜索框提示功能示例代码
Aug 13 Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
JavaScript字符串删除重复字符的方法
Dec 25 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
vue slot 在子组件中显示父组件传递的模板
Mar 02 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
Apr 11 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
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
牡丹941资料
2021/03/01 无线电
PHP中对数据库操作的封装
2006/10/09 PHP
php操作xml入门之xml标签的属性分析
2015/01/23 PHP
JS 判断代码全收集
2009/04/28 Javascript
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
前台js调用后台方法示例
2013/12/02 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
js图片切换具体实现代码
2016/10/13 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
利用Python开发微信支付的注意事项
2016/08/19 Python
python 容器总结整理
2017/04/04 Python
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
人事主管的岗位职责
2013/11/16 职场文书
技术学校毕业生求职信分享
2013/12/02 职场文书
空乘英文求职信
2014/04/13 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
本科应届生自荐信
2014/06/29 职场文书
建筑管理专业求职信
2014/07/28 职场文书
营销计划书范文
2015/01/17 职场文书
慰问信格式规范
2015/03/23 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
行政介绍信范文
2015/05/04 职场文书
pytorch中的model.eval()和BN层的使用
2021/05/22 Python
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript