How to show and hide divs in javascript

Method: 1. Use the display attribute, the syntax "div object.style.display="none|block""; 2. Use the visibility attribute, the syntax "div object.style.visibility="hidden|visible" ".

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

<div id="demo">AAA</div>

There are two ways to hide and show divs in JS:

Method 1: Release the occupied page space after hiding

By setting the display attribute, you can hide the div and release the occupied page space.

style="display: none;"

document.getElementById("demo").style.display="none";//隐藏
document.getElementById("demo").style.display="block";//显示

Method 2: After hiding, it still occupies the page space and displays blank space.

The visibility of div can control the display and hiding of div, but the page will appear blank after hiding.

style="visibility: none;"

document.getElementById("demo").style.visibility="hidden";//隐藏
document.getElementById("demo").style.visibility="visible";//显示

Note:

Using the second method is more user-friendly, however, use div.style.display= "none"Hide will cause the things inside the div to sleep and the events inside will not respond.

[Recommended learning: javascript advanced tutorial]

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