How to hide elements in html

htmlMethods to hide elements: 1. Hide through "display:none;"; 2. Hide through "overflow:hidden;"; 3. Set the attribute values ​​​​of the box model such as the width and height of the element to 0; 4. Use positioning to hide; 5. Set the element transparency to 0; 6. Hide through visibility.

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

How to hide HTML elements

1.display:none;

Features: Really hidden elements.

(1) Setting the display attribute of the element to none can ensure that the element is invisible;

(2) Using this attribute, the hidden element does not occupy any space;

(3) Use display:none to hide elements, and you cannot directly interact with the user

(In addition, the content of the element cannot be read using screen reading software. This method of hiding is as if the element does not exist at all. )

(4) Any descendant elements of this hidden element will also be hidden;

(5) However, this hidden element can be accessed through DOM operations in JS, or Manipulate it through the DOM.

2.overflow: hidden;

Principle: Set the element position to outside the parent element.

3. Set the attribute value of the box model such as width and height of the element to 0.

4. Use positioning to hide elements.

Advantages: As long as the left and top of the element are set to a large enough plurality (this element can interact with the user);

Disadvantage: You can still use screen reading software to read the content of the element .

5.opacity: Set the element transparency to 0.

Features: Set the transparency of the element to 0, which only hides the element from sight. The position of the element itself still exists, and you can also interact with the user.

6.visibility: Set whether the element is visible.

default: Visible (visible);

CSS Video Tutorial column!

The above is the detailed content of How to hide elements in html. For more information, please follow other related articles on the PHP Chinese website!