動態的隱藏和顯示：

// 隱藏元素

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);

/* 不占據空間，無法點擊 */

}

總結

以上是生活随笔為你收集整理的css隐藏状态,CSS元素隐藏和显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。