一个设置为display:none;的div，在用.height()方法获取不到它的高，获取到的高度为0....

<div style="width:100px;height:100px;background:red;visibility:hidden"></div>
//对象隐藏后，还有占有相应的空间大小

<div style="width:100px;height:100px;background:red;display:none"></div>
//对象隐藏后，对象不占任何空间

CSS中的visibility和display两个属性很容易被混淆，因为它们看起来是做同样的事情，但实际上，这两个属性是完全不同的。
 visibility属性用来设置一个给定的元素是否显示（visibility="visible|hidden"），但是，虽然一个元素的visibility被设置为hidden，但是该元素仍然会占据设计的位置：hidden仅仅是隐藏, 但是他的位置会保留

注意如果display属性没有被明确设置，将默认被设置为该类元素的常用值。
明显地，两个属性中display属性更有用，多数情况下在隐藏文字的时候要将相关的元素做相应的调节（例如树结构）。none表示完全没有, 当前的位置会被后面的元素补上来

使用 visibility:hidden属性会使对象不可见，但该对象在网页所占的空间没有改变（看不见但摸得到），等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失（看不见也摸不到）。

<script language="JavaScript">
    function toggleVisibility(me){
        if (me.style.visibility=="hidden"){
            me.style.visibility="visible";
            }
        else {
            me.style.visibility="hidden";
            }
        }
</script>

<div οnclick="toggleVisibility(this)" style="position:relative">

转载于:https://www.cnblogs.com/jsingleegg/p/4980232.html