本節(jié)通過(guò)向大家描述display和visibility的差別，來(lái)向大家說(shuō)明在表單元素（控件）不可見(jiàn)上，你應(yīng)該用visibility還是display。雖然它們都可以達(dá)到隱藏頁(yè)面元素的目的，但它們的區(qū)別在于如何回應(yīng)正常文檔流。    

屬性大比拼：visibility和display的介紹

今天在做一個(gè)表單時(shí)涉及到這方面，當(dāng)選中相應(yīng)的選項(xiàng)后設(shè)置相應(yīng)的幾個(gè)元素（控件可見(jiàn)或不可見(jiàn)），后來(lái)還是用了visibility來(lái)實(shí)現(xiàn)。我們先來(lái)看下visibility對(duì)應(yīng)的幾個(gè)屬性的介紹：

visibility:visible   
/*元素可見(jiàn)，默認(rèn)值*/   
visibility:hidden   
/*元素不可見(jiàn)，但仍然為其保留相應(yīng)的空間*/   
visibility:collapse   
/*只對(duì)table對(duì)象起作用，能移除行或列但不會(huì)影響表格的布局。如果這個(gè)值用   
在table以外的對(duì)象上則表現(xiàn)為hidden。*/   
visibility:inherit  
/*繼承上級(jí)元素的visibility值。*/ 

再來(lái)看一下display對(duì)應(yīng)的幾個(gè)屬性的介紹：  
display:none  
/*元素不可見(jiàn)，并且不為其保留相應(yīng)的位置*/ 
display:block  
/*表現(xiàn)為一個(gè)塊級(jí)元素（一般情況下獨(dú)占一行）*/ 
display:inline  
/*表現(xiàn)為一個(gè)行級(jí)元素（一般情況下不獨(dú)占一行）*/ 

visibility和display中不可見(jiàn)的區(qū)別

估計(jì)看到這里，你也就大概知道了兩者的區(qū)別了吧。哈哈。雖然Visibility和Display屬性都可以隱藏一個(gè)元素，但它們之間的不同點(diǎn)在于visibility：hidden在隱藏一個(gè)元素的同時(shí)仍然在頁(yè)面上為該元素保留所需的空間，而display：none則表現(xiàn)得像把元素從頁(yè)面里刪除了，在頁(yè)面上看不出該元素還存在著。

如何運(yùn)用？

區(qū)別知道了，但如何運(yùn)用起來(lái)呢。在頁(yè)面開(kāi)發(fā)中，表單元素（控件）不可見(jiàn)，你用visibility還是display？

下面說(shuō)一個(gè)通用的方法。如果你想隱藏某元素，但在頁(yè)面上保留該元素的空間的話(huà)，你應(yīng)該使用visibility: hidden 。如果你想在隱藏某元素的同時(shí)讓其它內(nèi)容填充空白的話(huà)應(yīng)該使用 display: none 。

實(shí)踐出真知

ok，***獻(xiàn)上下午我寫(xiě)的這個(gè)簡(jiǎn)單的js小函數(shù)來(lái)做為實(shí)踐總結(jié)。這個(gè)小函數(shù)的功能是，當(dāng)用戶(hù)選擇了下拉列表框后，獲取下拉列表框的值，根據(jù)這個(gè)下拉框的值來(lái)判斷某些元素（控件）可見(jiàn)或是不可見(jiàn)。很簡(jiǎn)單滴。。。 

function ChangeReason() {   
if (ccbChangeReason.value == "A 建設(shè)銀行") {   
checkbox1.style.visibility = "visible";   
checkbox2.style.visibility = "visible";   
checkbox3.style.visibility = "visible";   
lblElseReason.style.visibility = "hidden";   
txtcElseReason.style.visibility = "hidden";   
}   
if (ccbChangeReason.value == "B 工商銀行") {  
checkbox1.style.visibility = "hidden";  
checkbox2.style.visibility = "hidden";  
checkbox3.style.visibility = "hidden";  
lblElseReason.style.visibility = "hidden";  
txtcElseReason.style.visibility = "hidden";  
}  
if (ccbChangeReason.value == "C 農(nóng)業(yè)銀行") {  
checkbox1.style.visibility = "hidden";  
checkbox2.style.visibility = "hidden";  
checkbox3.style.visibility = "hidden";  
lblElseReason.style.visibility = "visible";  
txtcElseReason.style.visibility = "visible";  
} 

【編輯推薦】

1. DIV中display和visibility屬性差別
2. CSS樣式中Display與Visibility屬性的區(qū)別
3. CSS DIV中Visibility和Display屬性用法區(qū)別
4. 技術(shù)分享 使用CSS visibility屬性控制內(nèi)容顯示