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 相关文章推荐
setAttribute 与 class冲突解决
Feb 17 Javascript
javascript full screen 全屏显示页面元素的方法
Sep 27 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
Feb 13 Javascript
JavaScript添加随滚动条滚动窗体的方法
Feb 23 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
May 26 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 Javascript
jQuery实现边框动态效果的实例代码
Sep 23 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
Mar 21 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
利用Node.js如何实现文件循环覆写
Apr 05 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 04 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及Zend Engine的线程安全模型分析
2011/11/10 PHP
浅谈PHP正则表达式中修饰符/i, /is, /s, /isU
2014/10/21 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
php给图片添加文字水印方法汇总
2015/08/27 PHP
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
js对象继承之原型链继承实例
2015/01/10 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
浅谈angular4生命周期钩子
2017/09/05 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
js实现搜索栏效果
2018/11/16 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
Python将xml和xsl转换为html的方法
2015/03/10 Python
python实现汉诺塔方法汇总
2016/07/25 Python
Python小进度条显示代码
2019/03/05 Python
Django中的cookie和session
2019/08/27 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
关于递归的一道.NET面试题
2013/05/12 面试题
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
三严三实学习心得体会
2014/10/13 职场文书
临床医学生职业规划书范文
2014/10/25 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
文明医院的标语集锦!
2019/07/24 职场文书