DIV in CSS shows and hides DIV

DIV is one of the most commonly used elements in HTML. It can be used to create various layouts and containers in web pages. In CSS, using DIVs to show or hide other DIVs is also an effective technique. This article will introduce how to use CSS to display and hide DIV.

Display DIV elements

To display a DIV element, you can use the CSS attribute display to control its display mode. The display attribute has four commonly used value types:

1. block: displays the element as a block-level element.
2. inline-block: Display the element as an inline block element (similar to an inline element, but with the characteristics of a block-level element).
3. inline: Display the element as an inline element (such as text).
4. none: Hides the element and does not occupy any space on the page.

For example, the following CSS style displays a DIV element with the ID "demo" as a block-level element:

demo {

display: block;

}

Of course, you can also display it as an inline block element or an inline element, just change the value type of the display attribute to "inline-block" or "inline".

Hide DIV element

To hide a DIV element, the most common method is to set the value type of the style display attribute to "none", as shown below:

demo {

display: none;

}

This method can make the target DIV element disappear completely. Even if you use JavaScript or other methods to obtain its value, you will not be able to obtain any content. If you set a DOM element's display to "none", it will not be displayed on the page - even if you set the height and width, it will not appear.

Of course, you can also use other methods to hide DIV elements, such as using the visibility attribute. The value types of the visibility attribute include:

1. visible: the element is visible.
2. hidden: The element is not visible, but takes up position on the page.
3. collapse: used for tables, elements will be collapsed.

For example, the following CSS style sets a DIV element with the ID "demo" to invisible:

demo {

visibility: hidden;

}

At this time, the DIV element will not be visible, but it will still occupy the position on the page. When you access its properties using JavaScript or other methods, it will still be visible.

Use JavaScript to control the display and hiding of DIV elements

In some cases, you may need to use JavaScript to control the display and hiding of DIV elements. At this time, we can use the style attribute provided by the DOM API to modify the CSS style of the element. For example, the following JavaScript code displays a DIV element with the ID "demo":

document.getElementById("demo").style.display = "block";

Same , we can also hide it:

document.getElementById("demo").style.display = "none";

It should be noted that the style attribute can only access inline styles , while external style sheets and embedded style sheets cannot be accessed. If you use an external style sheet to control the style of elements, then you need to use other methods to modify the style sheet, such as manipulating the link element through the DOM API.

Summary

Using DIV elements in CSS to show or hide other elements is a very practical technology. It can be used to create dynamic web page effects, hide ads and content, and use JavaScript to control elements. Status etc. It should be noted that the value types of the display attribute and the visibility attribute are very different, and should be selected based on the specific implementation effect.

When using JavaScript to control the style of elements, you should pay attention to browser compatibility issues in order to better support various platforms and devices. At the same time, it is recommended to use CSS to control the style of elements whenever possible to improve code maintainability and performance.

The above is the detailed content of css div show hide div. For more information, please follow other related articles on the PHP Chinese website!