建站
咨詢
售后
建站咨詢
新聞中心
本節(jié)通過向大家描述display和visibility的差別，來向大家說明在表單元素（控件）不可見上，你應(yīng)該用visibility還是display。雖然它們都可以達(dá)到隱藏頁面元素的目的，但它們的區(qū)別在于如何回應(yīng)正常文檔流。
在福海等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì) 網(wǎng)站設(shè)計(jì)制作按需求定制開發(fā),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站設(shè)計(jì),全網(wǎng)營銷推廣,外貿(mào)網(wǎng)站制作,福海網(wǎng)站建設(shè)費(fèi)用合理。
屬性大比拼：visibility和display的介紹
今天在做一個(gè)表單時(shí)涉及到這方面，當(dāng)選中相應(yīng)的選項(xiàng)后設(shè)置相應(yīng)的幾個(gè)元素（控件可見或不可見），后來還是用了visibility來實(shí)現(xiàn)。我們先來看下visibility對應(yīng)的幾個(gè)屬性的介紹：
- visibility:visible
- /*元素可見，默認(rèn)值*/
- visibility:hidden
- /*元素不可見，但仍然為其保留相應(yīng)的空間*/
- visibility:collapse
- /*只對table對象起作用，能移除行或列但不會(huì)影響表格的布局。如果這個(gè)值用
- 在table以外的對象上則表現(xiàn)為hidden。*/
- visibility:inherit
- /*繼承上級(jí)元素的visibility值。*/
- 再來看一下display對應(yīng)的幾個(gè)屬性的介紹：
- display:none
- /*元素不可見，并且不為其保留相應(yīng)的位置*/
- display:block
- /*表現(xiàn)為一個(gè)塊級(jí)元素（一般情況下獨(dú)占一行）*/
- display:inline
- /*表現(xiàn)為一個(gè)行級(jí)元素（一般情況下不獨(dú)占一行）*/
visibility和display中不可見的區(qū)別
估計(jì)看到這里，你也就大概知道了兩者的區(qū)別了吧。哈哈。雖然Visibility和Display屬性都可以隱藏一個(gè)元素，但它們之間的不同點(diǎn)在于visibility：hidden在隱藏一個(gè)元素的同時(shí)仍然在頁面上為該元素保留所需的空間，而display：none則表現(xiàn)得像把元素從頁面里刪除了，在頁面上看不出該元素還存在著。
如何運(yùn)用？
區(qū)別知道了，但如何運(yùn)用起來呢。在頁面開發(fā)中，表單元素（控件）不可見，你用visibility還是display？
下面說一個(gè)通用的方法。如果你想隱藏某元素，但在頁面上保留該元素的空間的話，你應(yīng)該使用visibility: hidden 。如果你想在隱藏某元素的同時(shí)讓其它內(nèi)容填充空白的話應(yīng)該使用 display: none 。
實(shí)踐出真知
ok，***獻(xiàn)上下午我寫的這個(gè)簡單的js小函數(shù)來做為實(shí)踐總結(jié)。這個(gè)小函數(shù)的功能是，當(dāng)用戶選擇了下拉列表框后，獲取下拉列表框的值，根據(jù)這個(gè)下拉框的值來判斷某些元素（控件）可見或是不可見。很簡單滴。。。
- 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";
- }
【編輯推薦】
- DIV中display和visibility屬性差別
- CSS樣式中Display與Visibility屬性的區(qū)別
- CSS DIV中Visibility和Display屬性用法區(qū)別
- 技術(shù)分享 使用CSS visibility屬性控制內(nèi)容顯示
分享名稱：表單元素（控件）不可見，你用visibility還是display？
網(wǎng)站URL：http://www.dlmjj.cn/article/djgoedh.html
