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