css隐藏状态,CSS元素隐藏和显示

动态的隐藏和显示：

// 隐藏元素

document.getElementById("div").style.visibility = "hidden";

// 显示元素

document.getElementById("div").style.visibility = "visible";

// 从页面中移除这个元素，当然元素的位置也被移除。

document.getElementById("div").style.display = "none";

// 此元素不会占据一行，和其它的元素一起组合显示。

document.getElementById("div").style.display = "inline";

// 此元素占据一行，单独显示

document.getElementById("div").style.display = "block";

$("div").css('display','none');

$("div").css('display','block');

$("div")[0].style.display = 'none';

$("div")[0].style.display = 'block';

// 表示display:block;

$("div").show();

// 表示display:none;

$("div").hide();

// 切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

$("div").toggle();

元素的隐藏CSS：

{ display: none; /* 不占据空间，无法点击 */ }

{ visibility: hidden; /* 占据空间，无法点击 */ }

{ position: absolute; top: -999em; /* 不占据空间，无法点击 */ }

{ position: relative; top: -999em; /* 占据空间，无法点击 */ }

{ position: absolute; visibility: hidden; /* 不占据空间，无法点击 */ }

{ height: 0; overflow: hidden; /* 不占据空间，无法点击 */ }

{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间，可以点击 */ }

{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间，可以点击 */ }

{

zoom: 0.001;

-moz-transform: scale(0);

-webkit-transform: scale(0);

-o-transform: scale(0);

transform: scale(0);

/* IE6/IE7/IE9不占据空间，IE8/FireFox/Chrome/Opera占据空间。都无法点击 */

}

{

position: absolute;

zoom: 0.001;

-moz-transform: scale(0);

-webkit-transform: scale(0);

-o-transform: scale(0);

transform: scale(0);

/* 不占据空间，无法点击 */

}