div css show hide div-Front-end Q&A-php.cn

div css show hide div

王林

Release： 2023-05-27 11:03:07

Original

1050 people have browsed it

CSS Tips: Display and hide DIV through the display attribute

As one of the commonly used elements in pages, DIV is widely used in layout, formatting and content segmentation. In actual development, we sometimes need to control the display and hiding of a DIV element through code. In this case, the display attribute of CSS can be used.

The role of the display attribute

The display attribute is a basic attribute in CSS used to control whether an element is displayed. It can be set to a variety of values to achieve different display and hiding effects. Specifically, the value of the display attribute is as follows:

none: Hiding the element is equivalent to completely removing the space of the element on the page. The element does not occupy any space and is not rendered.
block: Display the element as a block-level element, that is, the element will occupy an exclusive line and automatically wrap before and after the label. You can set styles such as width, height, margins and padding.
inline: Display the element as an inline element, that is, the element will not occupy an exclusive line and will automatically wrap at the end. Styles such as width, height, margins, and padding cannot be set.
inline-block: Display elements as inline block elements, which have the characteristics of block-level elements. You can also set multiple inline elements to be displayed on the same line.
table, table-row, table-cell, etc.: Display elements as table and its cell elements.

Realizing the display and hiding of DIV

Next, we will use several examples to demonstrate how to use the display attribute to display and hide DIV.

Click the button to display and hide DIV

In this example, we control the display and hiding of DIV through a button.

HTML part:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS显示和隐藏DIV</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
<body>
    <button onclick="toggle()">点击显示/隐藏DIV</button>
    <div id="myDiv" style="display:none;">这是一个DIV元素</div>
    <script src="js/main.js"></script>
</body>
</html>

Copy after login

CSS part:

#myDiv {
    width: 200px;
    height: 200px;
    background-color: #ccc;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Copy after login

JavaScript part:

function toggle() {
    var div = document.getElementById("myDiv");
    if (div.style.display === "none") {
        div.style.display = "block";
    } else {
        div.style.display = "none";
    }
}

Copy after login

In this example, we added in the button element of HTML An onclick event and defines a toggle function. This function will obtain the DIV element we need to control through the getElementById method, and then realize the display and hide effects by judging the display attribute value of the element.

When we click the button, the toggle function will determine whether the display attribute value of the current DIV element is none. If so, it will be set to block, that is, displayed; if not, it will be set to none. , that is, hidden.

Use the :hover selector to display and hide DIV

In this example, we control the display and hiding of DIV by hovering the mouse over the element.

HTML part:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS显示和隐藏DIV</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
<body>
    <div id="myDiv">
        <p>鼠标悬停在这里，显示下面的DIV元素</p>
        <div id="myPopup">这是一个DIV元素</div>
    </div>
</body>
</html>

Copy after login

CSS part:

#myDiv {
    width: 200px;
    height: 80px;
    background-color: #eee;
    position: relative;
}
#myPopup {
    width: 100px;
    height: 100px;
    background-color: #ddd;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
}
#myDiv:hover #myPopup {
    display: block;
}

Copy after login

In this example, we use: hover selector to display and hide DIV elements. When the mouse hovers over the myDiv element, the myPopup element will be displayed; when the mouse leaves the myDiv element, the myPopup element will be hidden. At this time, we only need to set the display attribute value of the myPopup element to none or block.

Use CSS3 transition animation to display and hide DIV

In this example, in order to make the display and hiding of DIV elements smoother and more natural, we use This is achieved using the transition animation effect of CSS3.

HTML part:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS显示和隐藏DIV</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
<body>
    <button onclick="toggle()">点击显示/隐藏DIV</button>
    <div id="myDiv">这是一个DIV元素</div>
    <script src="js/main.js"></script>
</body>
</html>

Copy after login

CSS part:

#myDiv {
    width: 200px;
    height: 200px;
    background-color: #ccc;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all .3s ease-in-out;
}

Copy after login

JavaScript part:

function toggle() {
    var div = document.getElementById("myDiv");
    if (div.style.opacity === "0") {
        div.style.display = "block";
        div.style.opacity = "1";
    } else {
        div.style.opacity = "0";
        setTimeout(function() {div.style.display = "none";}, 300);
    }
}

Copy after login

In this example, we define the myDiv element in CSS An all .3s ease-in-out transition effect, so that when we modify the display attribute value or opacity attribute value of the myDiv element, a smooth transition will be made according to this effect.

In JavaScript, we use the setTimeout function to delay the execution of a block of code to wait for the completion of the transition effect. When we click the button, the toggle function will determine whether the opacity attribute value of the current DIV element is 0. If so, it will be set to 1, and the display attribute value will be set to block, which is displayed; if not, it will be displayed. Set it to 0, then wait for the transition to complete, and finally set its display attribute value to none, that is, hide it.

Summary

Through the above three examples, we can see that the display attribute of CSS can easily realize the display and hiding effects of DIV elements, and during the implementation process, JavaScript and With the help of CSS3, the effect is richer and more natural. I hope this article can help everyone master the display attribute of CSS!

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