jquery height 获取不到隐藏元素高度的问题

今天在写js的时候遇到这样一个场景，页面上有两个tab页，其中有相同的两个div。在切换的时候需要获取该div的高度，然后做相应的判断。结果发现使用$('').height();获取高度的时候，一个可以取到，一个是 0 这样一个奇怪的现象。
通过debug调试发现，在切换tab的时候，会对其中一个hide()另一个show()，当我们想获取隐藏元素的高度时得到的就是0。
说到这里，就不得不提CSS中的两个属性visibility和display。

附:CSS display 属性； CSS visibility 属性

这两个属性都可以控制元素的隐藏和显示，看起来实现的效果是一样的，但实际上他们还是有挺大差别的。

<div style="visibility:hidden;"></div>
//该元素虽然隐藏了，但是会占据相对应的位置

<div style="display:none;"></div>
//该元素不仅隐藏，并且不会占用任何空间

说实话，写了这么多js，从来没有用过visibility这个属性，也不知道隐藏元素的高度是获取不到的。看来要学习的东西还是很多呀。

回到最开始的问题，在对其中一个tabhide()的时候实际上就是给该元素添加了style="display:none;"的样式，因为display不占用空间所以获取不到高度。如果想要获取到隐藏元素的高度，可以使用style="visibility:hidden/visible;"来控制元素的隐藏和显示。但是由于visibility占用空间，所以页面上会留白，这个可以自己尝试一下效果。

还有一个可以解决问题的方法就是使用jQuery Actual。
该插件可以解决即使在style="display:none;"情况下也可以获取到元素的高度。有兴趣的可以学习一下，这里不再赘述。

jquery height 获取不到隐藏元素高度的问题相关推荐

原生js获取html元素高度,js获取页面及个元素高度、宽度的代码
网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offs ...
【jQuery/CSS】显示或隐藏元素
1. CSS分别有display.visibility两个样式可以用于隐藏或显示HTML元素 1) display样式有多个类型的值可选择,默认值为inline,隐藏后会释放元素所占用的页面空间(详见 ...
jquery 如何获取动态添加的元素
2019独角兽企业重金招聘Python工程师标准>>> <td><buttonclass="del">删除</button>& ...
jquery查找父窗体id_js/jquery如何获取父窗口的元素？
展开全部取父窗32313133353236313431303231363533e58685e5aeb931333365643565口的元素方法: $(selector, window.parent. ...
html中隐藏div的高度,jQuery如何获取隐藏元素的高度？
一个HTML元素可以在jquery的hide()函数的帮助下隐藏,或者可以通过在css中使用visibility:hidden;来轻松隐藏.我们也可以很容易地使用jquery来找到这个隐藏元素的高度. ...
js隐藏html页面元素高度,如何使用jQuery获取隐藏元素的高度？
HTML元素可以在jquery hide()函数的帮助下隐藏,或者也可以通过在css中使设置visibility:hidden来轻松隐藏.那么如何使用jquery找到这个隐藏元素的高度?下面本篇文章就 ...
jQuery获取不到隐藏DIV的高度和宽度
今天做公司订单系统的修改,有同事将订单维护的四个部分拆成了四个小的tab页,由于数据表格时动态加载,所以表格的高度是动态变化的,可不知怎么,先点哪个哪个的高度就正常,其他的都是最小值,这下蒙了,这个找 ...
[jQuery]无法获取隐藏元素（display:none）宽度(width)和高度(height)的新解决方案
在做茶城网改版工作的时候,又遇到一个新问题,我需要用jQuery写一个通过点击左右图标来翻阅图片的小插件,写好后测试可以正常运行,但是放到Tab中后发现只有第一个Tab中的代码能够正常运行,其它全部罢 ...
jQuery无法获取隐藏元素（display:none）宽度(width)和高度(height)的新解决方案
jQuery无法获取隐藏元素(display:none)宽度(width)和高度(height)的新解决方案参考文章: (1)jQuery无法获取隐藏元素(display:none)宽度(width ...

jquery height 获取不到隐藏元素高度的问题

jquery height 获取不到隐藏元素高度的问题相关推荐

最新文章

热门文章