表单元素（控件）不可见，你用visibility还是display？

表单元素（控件）不可见，你用visibility还是display？

属性大比拼：visibility和display的介绍

今天在做一个表单时涉及到这方面，当选中相应的选项后设置相应的几个元素（控件可见或不可见），后来还是用了visibility来实现。我们先来看下visibility对应的几个属性的介绍：

---

1 visibility:visible
2 /* 元素可见，默认值 */
3 visibility:hidden
4 /* 元素不可见，但仍然为其保留相应的空间 */
5 visibility:collapse
6 /* 只对table对象起作用，能移除行或列但不会影响表格的布局。如果这个值用
7
8 在table以外的对象上则表现为hidden。 */
9 visibility:inherit
10 /* 继承上级元素的visibility值。 */

---

1 再来看一下display对应的几个属性的介绍：
2
3 display:none
4 /* 元素不可见，并且不为其保留相应的位置 */
5 display:block
6 /* 表现为一个块级元素（一般情况下独占一行） */
7 display:inline
8 /* 表现为一个行级元素（一般情况下不独占一行） */

---

不好意思，我要华丽丽地加上一条链接，让复制粘贴不注明文章出处的人帮我做个外链，抱歉。http://www.chunye39.com   纯野原创博客

---

visibility和display中不可见的区别

估计看到这里，你也就大概知道了两者的区别了吧。哈哈。虽然Visibility和Display属性都可以隐藏一个元素，但它们之间的不同点在于visibility：hidden在隐藏一个元素的同时仍然在页面上为该元素保留所需的空间，而display：none则表现得像把元素从页面里删除了，在页面上看不出该元素还存在着。

---

如何运用？

区别知道了，但如何运用起来呢。在页面开发中，表单元素（控件）不可见，你用visibility还是display？

下面说一个通用的方法。如果你想隐藏某元素，但在页面上保留该元素的空间的话，你应该使用visibility: hidden 。如果你想在隐藏某元素的同时让其它内容填充空白的话应该使用 display: none 。

---

实践出真知

ok，最后献上下午我写的这个简单的js小函数来做为实践总结。这个小函数的功能是，当用户选择了下拉列表框后，获取下拉列表框的值，根据这个下拉框的值来判断某些元素（控件）可见或是不可见。很简单滴。。。

   

1 function ChangeReason() {
2 if (ccbChangeReason.value == " A 建设银行 " ) {
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 农业银行 " ) {
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 }

转载于:https://www.cnblogs.com/chunye39/archive/2011/04/21/2023120.html