How to control the display and hiding of divs with css

DIV CSS Show and Hide

DIV is a commonly used tag in HTML, used to divide pages and implement layout. In the interactive effects of the page, we sometimes need to dynamically display or hide certain DIV elements. At this time, we can use the display property of CSS to control the visibility of the DIV.

1. Display attribute

The display attribute is used to control the display mode of HTML elements. It can take the following values:

1. none

When set to none, the element will be hidden and will not leave any space within the page.

2. block

When set to block, the element will be displayed as a block-level element, that is, the element occupies one line and the width of the container is filled.

3. inline

When set to inline, the element will be displayed as an inline element, that is, multiple elements can be displayed on the same line.

4. inline-block

When set to inline-block, the element will be displayed as an inline block-level element, that is, multiple elements can be displayed on the same line, and There is some spacing between elements.

5. table

When set to table, the element will be displayed in table form, and the layout of the element can be controlled using table-related CSS properties.

The above values ​​can be used in the display attribute of the DIV element.

2. Basic syntax

By setting the display attribute, we can display or hide the DIV element. The following is the basic syntax:

//显示元素
document.getElementById('example').style.display = 'block';

//隐藏元素
document.getElementById('example').style.display = 'none';

In the above code, we obtain the DIV element with the id of example through getElementById, and then control the display or hiding of the element by setting the style.display attribute.

3. Example Demonstration

Below we will use an example demonstration to illustrate how to use the display property of CSS to control the display or hiding of elements.

1. Hide DIV element

The following is a DIV element:

<div id="example">Hi,我是DIV元素！</div>

We can use the following code to hide this element:

document.getElementById('example').style.display = 'none';

In this example, we get the DIV element with the id example, and then set its display attribute to none, thereby hiding the element.

2. Display DIV element

If we want to display a previously hidden DIV element, we can use the following code:

document.getElementById('example').style.display = 'block';

This way you can The previously hidden DIV element is redisplayed.

3. Change the display mode of DIV elements

When explaining the display attribute earlier, we mentioned that you can set the display mode of block-level, in-line, in-line block-level and other elements. We can also change the display of DIV elements in this way.

For example, we can use the following code to modify a DIV element into an inline element:

document.getElementById('example').style.display = 'inline';

In this way, the DIV element that originally occupied a whole line will be arranged inline like the text. .

4. Summary

In page interaction effects, we often need to dynamically control the display or hiding of elements. This function can be easily achieved using the CSS display property. Through simple syntax, we can control whether the DIV element actually exists or not, and modify how it is displayed. Be aware that modifying the display property will also affect how the element's descendants are displayed.

The above is the detailed content of How to control the display and hiding of divs with css. For more information, please follow other related articles on the PHP Chinese website!