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

display和visibility混淆，它们看似没有什么不一样，其实它们的差异倒是很大的。在作表单元素不可见上，你用你用visibility仍是display？本文给你讲解。

AD：

本节经过向你们描述display和visibility的差异，来向你们说明在表单元素（控件）不可见上，你应该用visibility仍是display。虽然它们均可以达到隐藏页面元素的目的，但它们的区别在于如何回应正常文档流。

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

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

 
 
 
 

  
  
  
  
  

 
 
 
  
visibility:visible   
 
 
  
/*元素可见，默认值*/   
 
 
  
visibility:hidden   
 
 
  
/*元素不可见，但仍然为其保留相应的空间*/   
 
 
  
visibility:collapse   
 
 
  
/*只对table对象起做用，能移除行或列但不会影响表格的布局。若是这个值用   
 
 
  
在table之外的对象上则表现为hidden。*/   
 
 
  
visibility:inherit  
 
 
  
/*继承上级元素的visibility值。*/ 
 

 

 
 
 
  
再来看一下display对应的几个属性的介绍：  
 
 
  
display:none  
 
 
  
/*元素不可见，而且不为其保留相应的位置*/ 
 
 
  
display:block  
 
 
  
/*表现为一个块级元素（通常状况下独占一行）*/ 
 
 
  
display:inline  
 
 
  
/*表现为一个行级元素（通常状况下不独占一行）*/ 
 

 

visibility和display中不可见的区别

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

如何运用？

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

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

实践出真知

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

function ChangeReason() {   if (ccbChangeReason.value == "A 建设银行") {   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 农业银行") {  checkbox1.style.visibility = "hidden";  checkbox2.style.visibility = "hidden";  checkbox3.style.visibility = "hidden";  lblElseReason.style.visibility = "visible";  txtcElseReason.style.visibility = "visible";  }