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 相关文章推荐
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
May 12 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 Javascript
学习vue.js条件渲染
Dec 03 Javascript
javascript输出AscII码扩展集中的字符方法
Dec 26 Javascript
js实现手机web图片左右滑动效果
Dec 29 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 Javascript
js module大战
Apr 19 Javascript
小程序外卖订单界面的示例代码
Dec 30 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
Sep 21 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新手上路(五)
2006/10/09 PHP
8个出色的WordPress SEO插件收集
2011/02/26 PHP
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
PHP中把有符号整型转换为无符号整型方法
2015/05/27 PHP
CI框架的安全性分析
2016/05/18 PHP
PDO::prepare讲解
2019/01/29 PHP
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
JS JSOP跨域请求实例详解
2016/07/04 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
详解vue高级特性
2020/06/09 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
跟老齐学Python之传说中的函数编写条规
2014/10/11 Python
Python判断操作系统类型代码分享
2014/11/22 Python
python绘制条形图方法代码详解
2017/12/19 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
python实现实时视频流播放代码实例
2020/01/11 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
大专毕业生简历的自我评价
2013/10/20 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
PHP判断是否是json字符串
2021/04/01 PHP
详解TS数字分隔符和更严格的类属性检查
2021/05/06 Javascript
JavaScript数组 几个常用方法总结
2021/11/11 Javascript