Form elements (Controls) are invisible. Do you use visibility or display?

Form elements (Controls) are invisible. Do you use visibility or display?

Attribute competition: Introduction to visibility and display

Today, this is involved in creating a form. After the corresponding options are selected, several elements (visible or invisible controls) are set, and visibility is used later. Let's first look at the introduction of several attributes corresponding to visibility:

 1   Visibility: visible
  2     /*  Visible element, default value  */  
  3   Visibility: hidden
  4     /* The element is invisible, but the corresponding space is still reserved for it.  */  
  5   Visibility: collapse
  6     /*  It only applies to table objects. It can remove rows or columns but does not affect table layout. If this value is used
  7   
  8   It is displayed as "hidden" on objects other than tables.  */  
  9  Visibility: Inherit
  10     /*  Inherits the visibility value of the parent element.  */ 

 1   Let's take a look at the introduction of several properties corresponding to display:
  2   
  3   Display: None
  4     /*  The element is invisible and the corresponding position is not reserved for it. */  
  5   Display: Block
  6     /*  It is represented as a block-level element (typically exclusive row)  */  
  7   Display: inline
  8     /*  It is a row-level element (generally, a row is not exclusive)  */ 

Sorry, I want to add a link to the link to ensure that the copy and paste information is not specified.ArticleThe source person helped me build an external link. Sorry. Original blog of http://www.chunye39.com pure wild

Differences between visibility and display

You probably know the difference between the two. Haha. Although both the visibility and display attributes can hide an element, the difference between them is that visibility: while hiding an element, hiding the required space for the element on the page, while display: none indicates that the element is deleted from the page. The element still exists on the page.

How to use it?

I know the difference, but how can I use it. In page development, the form elements (Controls) are invisible. Do you use visibility or display?

The following describes a general method. If you want to hide an element but keep its space on the page, you should use visibility: hidden. Use display: none if you want to hide an element and fill other content with blank content.

Practice

OK. Finally, I will present this simple JS small function that I wrote in the afternoon as a summary of the practice. The function of this small function is to obtain the value of the drop-down list box after the user selects the drop-down list box and determine whether some elements (Controls) are visible or invisible based on the value of the drop-down box. Simple drop...

 1  Function changereason (){
  2     If  (Ccbchangereason. Value  =     "  A Construction Bank  "  ){
  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  =     "  Industrial and Commercial Bank 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  =     "  Agricultural Bank 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   }