How to show and hide elements in css

CSS is a language used for web design. It can improve the readability and interactivity of web pages, and also makes the expression of web elements richer. Among them, the display and hiding functions of CSS are common requirements in the web design process. This article will introduce in detail how to display and hide elements in CSS.

1. Use the display attribute

The display attribute of CSS can control the display mode of elements. Common attribute values ​​include block, none, inline, inline-block, etc. Among them, the none attribute value can hide the element. Under this attribute value, the element will not be displayed on the web page.

For example, the following code can display and hide paragraphs by clicking a button:

HTML code:

<button>隐藏段落</button>
<p>这是一段话。</p>

CSS code:

#hide-me {
  display: block;
}

JavaScript code:

function hide() {
    var para = document.getElementById("hide-me");
    para.style.display = "none";
}

In the above code, when the button is clicked, the JavaScript code will obtain the paragraph element with the ID "hide-me", and then modify its display attribute to achieve the effect of hiding the element.

2. Use the visibility attribute

The visibility attribute of CSS can control the visibility of elements on the page. Common attribute values ​​​​are visible, hidden, and collapse. Among them, the hidden attribute value can hide the element. Under this attribute value, the element will still occupy space on the web page.

For example, the following code can display and hide paragraphs by clicking a button:

HTML code:

<button>隐藏段落</button>
<p>这是一段话。</p>

CSS code:

#hide-me {
  visibility: visible;
}

JavaScript code:

function hide() {
    var para = document.getElementById("hide-me");
    para.style.visibility = "hidden";
}

In the above code, when the button is clicked, the JavaScript code will obtain the paragraph element with the ID "hide-me", and then modify its visibility attribute to achieve the effect of hiding the element.

3. Use the opacity attribute

The opacity attribute of CSS can control the transparency of the element. The common attribute value is a number from 0 to 1, indicating the opacity of the element. Among them, 0 means completely transparent and 1 means opaque. By setting the element's opacity attribute to 0, we can also hide the element.

For example, the following code can display and hide paragraphs by clicking a button:

HTML code:

<button>隐藏段落</button>
<p>这是一段话。</p>

CSS code:

#hide-me {
  opacity: 1;
}

JavaScript code:

function hide() {
    var para = document.getElementById("hide-me");
    para.style.opacity = "0";
}

In the above code, when the button is clicked, the JavaScript code will obtain the paragraph element with the ID "hide-me", and then modify its opacity attribute to achieve the effect of hiding the element.

4. Use the z-index attribute

In some cases, we need to use the stacking order to control the hiding and display of elements. The z-index attribute of CSS can control the stacking order of elements on the page by setting the level of the element, and then by adjusting the z-index attribute value of different elements, the hiding and display effects can be achieved.

For example, the following code can display and hide paragraphs by clicking a button:

HTML code:

<button>隐藏段落</button>
<p>这是一段话。</p>

CSS code:

JavaScript code:

function hide() {
    var para = document.getElementById("hide-me");
    para.style.zIndex = "-1";
}

In the above code, when the button is clicked, the JavaScript code will obtain the paragraph element with the ID "hide-me", and then modify its z-index attribute to achieve the effect of hiding the element.

Summary

The display and hide functions in CSS are very commonly used. It can help us control the display and hiding of various elements in web pages. By using display, visibility, opacity and z-index properties, we can easily achieve the desired effect and make web design more flexible and diverse.

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