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:
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.
In this example, we control the display and hiding of DIV through a button.
HTML part:
CSS part:
#myDiv { width: 200px; height: 200px; background-color: #ccc; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
JavaScript part:
function toggle() { var div = document.getElementById("myDiv"); if (div.style.display === "none") { div.style.display = "block"; } else { div.style.display = "none"; } }
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.
In this example, we control the display and hiding of DIV by hovering the mouse over the element.
HTML part:
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; }
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.
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:
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; }
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); } }
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!