js获取隐藏元素的宽度和高度

获取隐藏元素的物理维度(display:none)

问题和情景

如果我们有这样的输入框，点击展开选择。下图：

这里，输入框和下面的扩展区是分开的，是两个独立的控件！初始状态下的可选框被隐藏(ng-show=false)

扩展区的可折叠组件手风琴高度(对应图中省份、排序字段、短信部分)随数据自适应扩展。当你点击手风琴折叠收缩时，会出现高度变化的动画效果！

计算手风琴高度时，无法得到数据节点元素的高度，导致手风琴高度为0，无法折叠！

原因

在隐藏的div元素节点中，无法获取其子元素的物理维度！也就是说，当输入框下方的扩展区域被隐藏时，手风琴式控件无法获得数据DOM节点元素的高度。

解决办法

JQuey中的Height()和width()方法获取隐藏元素的维度。但这只能得到隐藏元素的高度，而不能得到内部子元素的高度！

解决方案：JS控制css设置元素的隐藏和显示

代码思路：显示隐藏元素(去掉元素的隐藏方式，css属性display:none或者一些样式类)-计算目标元素的高度-恢复隐藏元素的样式

有问题：

1.元素在显示和隐藏之间切换时闪烁-解决方案：通过使用css中visibility:hidden的不可见属性，visibility 3360 hidden的隐藏元素具有物理尺寸。

如果高度计算可以在很短的时间内完成，这种闪烁现象可以忽略不计！

2.元素显示后，它将占据物理大小可能影响其他元素的位置-解决方案：将此隐藏元素移出屏幕或脱离文档流(绝对位置：)。

示例代码如下：

调用getSize方法传入隐藏元素元素和需要获取大小的目标元素，然后就可以返回targetEl的大小了！

//获取元素的物理维度，参数：元素隐藏的元素节点；TargetEl需要获取目标元素的大小。getsize=function (element，target El){//添加隐藏以防止元素在取消隐藏时闪烁；绝对位置：并显示：none，查看是否需要添加var _ addcss={ visibility : ' hidden ' }；var _ oldCss={ }；var _ widthvar _ heightif (this.getStyle(元素，‘display’)！='none') { return { width:targetEl？targetEl.offsetWidth :元素. offset with，height:targetEl？targetel . offset heat : element . offset heat }；} for(var I in _ addCss){ _ old CSS[I]=this . getstyle(element，I)；} this.setStyle(元素，_ addCss)；//这里通过angularjs的ng-show指令隐藏元素，可以通过移除ng-hide style类来取消隐藏var _ isnghide=element . class list . contains(' ng-hide ')；_ isNgHide element . class list . remove(' ng-hide ')；_width=！targetEl？targetEl.offsetWidth :元素. offset with；_height=！targetEl？targetEl.offsetHeight :元素. offset heat；//恢复以前的样式，classthis.setstyle (element，_ old CSS)；_ isNgHide element . class list . add(' ng-hide ')；返回{ width: _width，height : _ height }；};this.getStyle=function(element，style name){ return element . style[style name]？element . style[style name]: element . current style？element . currentstyle[style name]: window . getcomputedstyle(element，null)[style name]；};this.setStyle=function(element，obj){ if(angular . isobject(obj)){ for(obj中的var属性){ var cssNameArr=property . split('-')；for (var i=1，len=cssNameArr.length我透镜；i ) { cssNameArr[i]=cssNameArr[i]。替换(cssNameArr[i])。charAt(0)，cssNameArr[i]。charAt(0)。toUpperCase())；} var CSS name=CSsNameArr . join(' ')；element . style[CSS name]=obj[property]；} } else if(angular . isstring(obj)){ element . style . csstext=obj；}};以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！