小編給大家分享一下display和visibility有哪些區(qū)別，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)建站擁有一支富有激情的企業(yè)網(wǎng)站制作團(tuán)隊，在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)深耕10年，專業(yè)且經(jīng)驗豐富。10年網(wǎng)站優(yōu)化營銷經(jīng)驗，我們已為數(shù)千家中小企業(yè)提供了成都做網(wǎng)站、網(wǎng)站制作解決方案，按需制作，設(shè)計滿意，售后服務(wù)無憂。所有客戶皆提供一年免費網(wǎng)站維護(hù)!

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

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

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

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

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

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

如何運用？

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

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

實踐出真知

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

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";  }

以上是“display和visibility有哪些區(qū)別”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！