Home > Article > Web Front-end > How to hide div elements in html
How to hide div elements in html
- 青灯夜游Original
- 2021-05-01 09:13:1037327browse
htmlHow to hide div elements: 1. Use the hidden attribute in the div tag and add the "hidden="hidden"" statement. 2. Use the style attribute in the div tag and add the "display: none;" style.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
Method 1: Use the hidden attribute
html The hidden attribute specifies that the element is hidden.
If this attribute is used, the element will be hidden; hidden elements will not be displayed.
The hidden attribute can be set so that users can only see an element when certain conditions are met (such as checking a check box, etc.). You can then use JavaScript to remove the hidden attribute, making the element visible.
Example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div hidden="hidden">这是一段隐藏的段落。</div> <div>这是一段可见的段落。</div> </body> </html>
Rendering:
##Method 2: Use display: none style
The display attribute specifies the type of box the element should generate. Settings:display: none;
Hidden objectsdisplay: block;
Except for conversion In addition to block-level elements, it also means display elements
display: none;can not be occupied Spatial, hiding the element, so dynamically changing this attribute will cause rearrangement (change the page layout), which can be understood as deleting the element on the page; it will not be inherited by descendants, but its descendants will not be displayed. , after all, they were all hidden together.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div style="display: none;">这是一段隐藏的段落。</div> <div>这是一段可见的段落。</div> </body> </html>Rendering:
html video tutorial"
The above is the detailed content of How to hide div elements in html. For more information, please follow other related articles on the PHP Chinese website!