bob体育官方平台
js获取掩盖成分的宽高_javascript手艺_脚本之家

获取隐藏元素的物理尺寸

js获取可见元素的尺寸还是比较方便的,这个可以直接使用这个方法:复制代码 代码如下:function getDefaultStyle{ // 返回最终样式函数,兼容IE和DOM,设置参数:元素对象、样式特性return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle[attribute];}但是如果这个元素是隐藏的,尺寸又是未知自适应的,哪有上面的方法就不行了!因为display:none的元素是没有物理尺寸的! 悲剧就这样发生了!

问题及场景

幸好css中还有visibility:hidden,不可见属性,他和display:none最大的区别就是visibility:hidden有物理尺寸。有物理尺寸就可以通过上面的方法获取尺寸,但是将display:none改成visibility:hidden后页面就有一块空白在那里,即使在你获取尺寸后在马上将visibility:hidden改成display:none页面那部分还是会抖动一下。那么最好的办法就是将这个隐藏的元素移出屏幕或者脱离文档流。这样似乎非常完美了,但是悲剧又发生了,如果你要再显示这个元素的时侯这个元素是不可见的,位置也不对,因为这是这个元素visibility:hidden;position: absolute。所以在获取尺寸后还要将样式还原回去。就是将position和visibility属性设回原来的样式。

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

这就是js获取隐藏元素的尺寸基本实现方式,大家有兴趣可以看看《精通javascript》这本书上的方法。

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

我这里也做了个简单的demo,大家可以看看源代码:复制代码 代码如下:

展开区域中可折叠组件accordion的高度是随着数据自适应撑开,点击accordion折叠收缩时有一个高度变化的动画效果!

js获取隐藏元素的尺寸

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

这是test容器,可见容器
这是test容器,可见容器
这是test容器,可见容器
这是test容器,可见容器
这是test容器,
这是test容器,
这是test容器,
这是test容器,
这是test容器,

原因

这是test容器,这是test容器,
这是test容器,
这是test容器,
这是test容器,
这是test容器,
这是test容器,

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

点我

解决方案

题外话:一般js的框架,库都已经封装了这个方法,比如jQ,我们可以直接使用 height方法获取隐藏元素的尺寸。

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

返回顶部