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

Source: Internet
Author: User

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
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:
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 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.


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 Visibility = " Visible " ;
4 Visibility = " Visible " ;
5 Visibility = " Visible " ;
6 Lblelsereason. style. Visibility = " Hidden " ;
7 Txtcelsereason. style. Visibility = " Hidden " ;
8 }
9 If (Ccbchangereason. Value = " Industrial and Commercial Bank B " ){
10 Visibility = " Hidden " ;
11 Visibility = " Hidden " ;
12 Visibility = " Hidden " ;
13 Lblelsereason. style. Visibility = " Hidden " ;
14 Txtcelsereason. style. Visibility = " Hidden " ;
15 }
16 If (Ccbchangereason. Value = " Agricultural Bank C " ){
17 Visibility = " Hidden " ;
18 Visibility = " Hidden " ;
19 Visibility = " Hidden " ;
20 Lblelsereason. style. Visibility = " Visible " ;
21 Txtcelsereason. style. Visibility = " Visible " ;
22 }
23 }

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.