您好,登錄后才能下訂單哦!
小編給大家分享一下display和visibility有哪些區(qū)別,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
屬性大比拼: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è)面上保留該元素的空間的話,你應(yīng)該使用visibility: hidden 。如果你想在隱藏某元素的同時(shí)讓其它內(nèi)容填充空白的話應(yīng)該使用 display: none 。
實(shí)踐出真知
ok,***獻(xiàn)上下午我寫(xiě)的這個(gè)簡(jiǎn)單的js小函數(shù)來(lái)做為實(shí)踐總結(jié)。這個(gè)小函數(shù)的功能是,當(dāng)用戶選擇了下拉列表框后,獲取下拉列表框的值,根據(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"; }
以上是“display和visibility有哪些區(qū)別”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。