今天在写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;"
情况下也可以获取到元素的高度。有兴趣的可以学习一下,这里不再赘述。