CSS和JS控制DIV層顯示和隱藏的實現方法

css中display和visibility可以隱藏和顯示html元素包括div層。看起來兩者非常類似，很多人會搞混。下面分別介紹兩者的屬性：

display:none|block;

1. display:none;

隱藏該html元素，在瀏覽器中消除該元素，不佔螢幕的空間。若其下有其他元素，就會上移到該空間區域（好像桌子上有100塊錢，現在我把它放在抽屜裡藏起來，桌子上放100錢的地方可以放在其他任何東西）。

2. dispaly:block;

顯示已經隱藏的html元素，如果別的元素占有了該空間時，他將下移，空間重新別原來的元素占有。（把100塊錢重新從抽屜裡那出來放回桌子上）。

visibility：hidden|visible;

1. visibility:hidden;

隱藏該元素，正真的隱藏，但他還占有那塊空間。這時，（桌子上有100塊錢，這是我蓋了桌布把他隱藏起來，錢還在那裡）。

2. visibility:visible;

讓元素顯示（拿掉了桌布，看到了100塊錢）。

所以display和visibility控制的分別是html元素是否存在和是否顯示，display的屬性定義該元素存在或不存在，而visibility的屬性只是控制該元素是否顯示出來，實際上還是存在的。

方式1：隱藏後釋放占用的頁面空間

通過設定display屬性可以使div隱藏後釋放占用的頁面空間.

style=「display: none;」

document.getelementbyid(「demo」).style.display=「none」;//隱藏

document.getelementbyid(「demo」).style.display="";//顯示

方式2：隱藏後仍占有頁面空間，顯示空白

div的visibility可以控制div的顯示和隱藏，但是隱藏後頁面顯示空白.

style=「visibility: none;」

document.getelementbyid(「demo」).style.visibility=「hidden」;//隱藏

document.getelementbyid(「demo」).style.visibility=「visible」;//顯示

注意：使用第二方式更人性化，但是，用div.style.display="none"隱藏會引起，div裡面的東西休眠，裡面的事件就不響應了。

jquery隱藏和顯示div的方式

1、$(

"#div").
attr
("style"
,"display:none;");
//隱藏div
$("#div").
attr
("style"
,"display:block;");
//顯示div
2、$(
"#div").
css(
"display"
,"none");
//隱藏div
$("#div").
css(
"display"
,"block");
//顯示div
3、$(
"#div").
hide()
;//隱藏div
$("#div").
show()
;//顯示div
4、$(
"#div").
toggle
(//動態顯示和隱藏
function (),
function ())
;"div"
>
<
/div>

注：

$("#div").show()表示display:block,

$("#div").hide()表示display:none;

CSS控制DIV層顯示和隱藏的實現方法

css中的display和visibility屬性 css中display和visibility可以隱藏和顯示html元素包括div層。看起來兩者非常類似，很多人會搞混。下面分別介紹兩者的屬性 display none block display none 隱藏該html元素，確切的說，是在瀏覽器中...

js控制按鈕,div顯示和隱藏

點我一下 方法 一 mymodal show 顯示 mymodal hide 隱藏 方法二 mymodal css display none 隱藏 mymodal css display block 顯示 演示方法 mymodal click function 如果出現排版問題,刪除block my...

利用JS做到隱藏div和顯示div

div的visibility可以控制div的顯示和隱藏，但是隱藏後頁面顯示空白 style visibility none document.getelementbyid typediv1 style.visibility hidden 隱藏 document.getelementbyid type...