表單元素（控件）不可見屬性“visibility”和“display”分析

(常春藤模型生成插件)Guruware Ivy 0.92b for 3ds Max7~2010 32bit簡體中文加強版

• 類型：濾鏡插件大小：7.6M語言：中文 評分：6.6
• 標簽：

立即下載

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

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

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

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

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

不好意思，我要華麗麗地加上一條鏈接，讓復(fù)制粘貼不注明文章出處的人幫我做個外鏈，抱歉。http://www.chunye39.com   純野原創(chuàng)博客

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，最后獻上下午我寫的這個簡單的js小函數(shù)來做為實踐總結(jié)。這個小函數(shù)的功能是，當用戶選擇了下拉列表框后，獲取下拉列表框的值，根據(jù)這個下拉框的值來判斷某些元素（控件）可見或是不可見。很簡單滴。。。

1 function ChangeReason() {
2 if (ccbChangeReason.value == "A 建設(shè)銀行") {
3 checkbox1.style.visibility = "visible";
4 checkbox2.style.visibility = "visible";
5 checkbox3.style.visibility = "visible";
6 lblElseReason.style.visibility = "hidden";
7 txtcElseReason.style.visibility = "hidden";
8 }
9 if (ccbChangeReason.value == "B 工商銀行") {
10 checkbox1.style.visibility = "hidden";
11 checkbox2.style.visibility = "hidden";
12 checkbox3.style.visibility = "hidden";
13 lblElseReason.style.visibility = "hidden";
14 txtcElseReason.style.visibility = "hidden";
15 }
16 if (ccbChangeReason.value == "C 農(nóng)業(yè)銀行") {
17 checkbox1.style.visibility = "hidden";
18 checkbox2.style.visibility = "hidden";
19 checkbox3.style.visibility = "hidden";
20 lblElseReason.style.visibility = "visible";
21 txtcElseReason.style.visibility = "visible";
22 }
23 }