表單元素（控件）不可見，你用visibility仍是display？

display和visibility混淆，它們看似沒有什麼不一樣，其實它們的差異倒是很大的。在作表單元素不可見上，你用你用visibility仍是display？本文給你講解。

AD：

本節經過向你們描述display和visibility的差異，來向你們說明在表單元素（控件）不可見上，你應該用visibility仍是display。雖然它們均可以達到隱藏頁面元素的目的，但它們的區別在於如何迴應正常文檔流。

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

今天在作一個表單時涉及到這方面，當選中相應的選項後設置相應的幾個元素（控件可見或不可見），後來仍是用了visibility來實現。咱們先來看下visibility對應的幾個屬性的介紹：

 
 
 
 

  
  
  
  
  

 
 
 
  
visibility:visible   
 
 
  
/*元素可見，默認值*/   
 
 
  
visibility:hidden   
 
 
  
/*元素不可見，但仍然爲其保留相應的空間*/   
 
 
  
visibility:collapse   
 
 
  
/*只對table對象起做用，能移除行或列但不會影響表格的佈局。若是這個值用   
 
 
  
在table之外的對象上則表現爲hidden。*/   
 
 
  
visibility:inherit  
 
 
  
/*繼承上級元素的visibility值。*/ 
 

 

 
 
 
  
再來看一下display對應的幾個屬性的介紹：  
 
 
  
display:none  
 
 
  
/*元素不可見，而且不爲其保留相應的位置*/ 
 
 
  
display:block  
 
 
  
/*表現爲一個塊級元素（通常狀況下獨佔一行）*/ 
 
 
  
display:inline  
 
 
  
/*表現爲一個行級元素（通常狀況下不獨佔一行）*/ 
 

 

visibility和display中不可見的區別

估計看到這裏，你也就大概知道了二者的區別了吧。哈哈。雖然Visibility和Display屬性均可以隱藏一個元素，但它們之間的不一樣點在於visibility：hidden在隱藏一個元素的同時仍然在頁面上爲該元素保留所需的空間，而display：none則表現得像把元素從頁面裏刪除了，在頁面上看不出該元素還存在着。

如何運用？

區別知道了，但如何運用起來呢。在頁面開發中，表單元素（控件）不可見，你用visibility仍是display？

下面說一個通用的方法。若是你想隱藏某元素，但在頁面上保留該元素的空間的話，你應該使用visibility: hidden 。若是你想在隱藏某元素的同時讓其它內容填充空白的話應該使用 display: none 。

實踐出真知

ok，最後獻上下午我寫的這個簡單的js小函數來作爲實踐總結。這個小函數的功能是，當用戶選擇了下拉列表框後，獲取下拉列表框的值，根據這個下拉框的值來判斷某些元素（控件）可見或是不可見。很簡單滴。。。 

function ChangeReason() {   if (ccbChangeReason.value == "A 建設銀行") {   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 農業銀行") {  checkbox1.style.visibility = "hidden";  checkbox2.style.visibility = "hidden";  checkbox3.style.visibility = "hidden";  lblElseReason.style.visibility = "visible";  txtcElseReason.style.visibility = "visible";  }