Shulou(Shulou.com)06/02 Report--

This article mainly introduces how to hide dom elements in css, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

The method of hiding dom element in css: 1, add "visibility:hidden;" style to dom element; 2, add "diaplay:none;" style to dom element; 3, add "opacity:0;" style to dom element.

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

1 、 visibility:hidden

Setting its value to hidden hides our element. Like the opacity attribute, hidden elements still work on our page layout. The only difference from opacity is that it does not respond to any user interaction. In addition, elements are hidden in screen reading software.

2 、 diaplay:none

The display attribute really hides elements according to the meaning of the word. Set the display attribute to none to ensure that the element is not visible and that even the box model is not generated. With this attribute, the hidden element does not take up any space. Not only that, once display is set to none, any direct user interaction with this element will not take effect. In addition, the screen reading software will not read the contents of the element. The effect of this approach is as if the element does not exist at all.

Any descendant of this element is also hidden at the same time. It is not valid to add excessive animation to this attribute, and any switching between its different state values will always take effect immediately.

Note, however, that this element is still accessible through DOM. So you can manipulate it through DOM. Just like other unhidden elements, such as $("), etc.

3 、 opacity:0

The opacity attribute means to set the transparency of an element. It is not designed to change the element's bounding box (bounding box). Setting opacity to 0 can only visually hide elements. While the element itself still occupies its own place and plays a role in the layout of the web page, it will also respond to user interaction.

Thank you for reading this article carefully. I hope the article "how to hide dom elements in css" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.