HTML elements are hidden and displayed

The method of hiding and displaying elements is often used in the Web front-end development process

Summary: 1. Control via JS or jquery

2. Control via CSS style

First, JS or jquery (for example, jquery)

1. Hide the element using the Hide () method, such as:

Method: Hide ()

Function: Hide the displayed element

Example:

$ ("P"). Hide ();

HTML Code:

< P > Hello word</p>

Results:

<style= "Display:none">Hello word</p> 

2. Show hidden elements, using the show () method, such as:

Method: Show ();

Action: Show hidden matching elements

Example:

$ ("P"). Show ();

HTML Code:

<style= "Display:none">Hello word</p  >

Results:

<style= "Display:block">Hello word</p  >

Second, CSS style control

1. By visibility

Visibility:hidden, visible

Visibility: Controls the display and hiding of page elements, and the position characteristics of elements that are not null values.

Hidden: Hiding elements
Visible: Display elements

when the element is hidden in the page, it occupies a display block, and other elements cannot use this position . When an element is hidden, it cannot receive events.

2. Through display

Display:block, inline, none

None: Removes this element from the page and, of course, the location of the element is removed.
Inline: This element does not occupy a row, and is combined with other elements to display.
Block: This element occupies a row and is displayed separately.

HTML elements are hidden and displayed