How to make an element invisible in html

htmlHow to set the element to be invisible: 1. Add the hidden attribute in the element tag; 2. Use the style attribute in the element tag to set the "display:none" style; 3. Use the style attribute in the element tag Set the "visibility:hidden" style.

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

There are three ways to make elements invisible in html:

• Use the hidden attribute
• Use the style attribute to set display:none
• Use the style attribute Set visibility: false

Obviously, there are two ways to make an element invisible:

• The element is completely invisible, and the element does not occupy space and seems to disappear
• The element is invisible, but still occupies the original space, as if invisible

Use the hidden attribute

ee3d63f9cbc9be5695d18b5080a3f00ahello16b28748ea4df4d9c2150843fecfba68

The effect of using the hidden attribute is that when rendering the DOM, the display attribute of the element will be automatically changed to none. Note that the only use of the hidden attribute is here: just change the display to none the first time you add the hidden attribute. In the future, even if the display attribute changes to block, the hidden attribute will still be there.

It can be seen that the effects of hidden and display=none are the same. But it is not as direct and fundamental as display. Therefore, do not use the hidden attribute in the future and directly access the display attribute in style.

Use the style attribute to set display:none

The display=none in style can make an element disappear completely without a trace. Takes up space.

<div style="display:none">hello</div>

Use the style attribute to set visibility=hidden

When visibility=hidden in style, the element seems to be invisible, but it still occupies the original Space.

<div style="visibility:hidden">hello</div>

Recommended tutorial: "html video tutorial"

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