css隐藏状态,css元素隐藏和显示 -凯发k8官方网

动态的隐藏和显示：

// 隐藏元素

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

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

}

总结

以上是凯发k8官方网为你收集整理的css隐藏状态,css元素隐藏和显示的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。