What are the three css methods to hide dom elements

Three CSS methods to hide dom elements: 1. Add the "visibility:hidden;" style to the dom element; 2. Add the "diaplay:none;" style to the dom element; 3. Add " opacity:0;" style.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Three css methods to hide dom elements

1、visibility:hidden;

Set its value to hidden will hide our element. Like the opacity attribute, hidden elements still have an effect on our web page layout. The only difference from opacity is that it does not respond to any user interaction. In addition, elements will be hidden in screen reading software.

2, diaplay:none;

The display attribute truly hides the element according to the meaning of the word. Setting the display property to none ensures that the element is not visible and not even the box model is generated. Using this attribute, hidden elements do not occupy any space. Not only that, once display is set to none, any direct user interaction operations on the element will not be effective. In addition, screen reading software will not read the content of the element. This way the effect is as if the element doesn't exist at all.

Any descendant elements of this element will also be hidden at the same time. Overanimating this property has no effect; any transition between its different state values ​​will always take effect immediately.

However, please note that this element can still be accessed through the DOM. So you can manipulate it through the DOM. Just like other elements that are not hidden, such as $(""), etc.

3, opacity:0;

opacity attribute It means to set the transparency of an element. It is not designed to change the bounding box of an element. This bit sets the opacity to 0 only to visually hide the element. While the element itself still occupies its own position and contributes to the layout of the web page, it will also respond to user interaction.

(Learning video sharing: css video tutorial)

The above is the detailed content of What are the three css methods to hide dom elements. For more information, please follow other related articles on the PHP Chinese website!