Home > Article > Web Front-end > html hide show
HTML Hide and Show
In HTML code, sometimes you need to hide and show certain elements. In this article, we will discuss several ways to hide and show elements in HTML.
The display attribute is used to specify the display mode of an element. It has the following optional values:
By setting the display attribute, elements can be hidden and displayed:
<div id="myDiv" style="display: none;">这是一个被隐藏的 div。</div> <button onclick="document.getElementById('myDiv').style.display='block'">显示</button> <button onclick="document.getElementById('myDiv').style.display='none'">隐藏</button>
In the above code, we first set the display attribute of the div element to none through the style attribute, that is, hidden the element. Then the button click operation is implemented through the onclick events of the two button elements and JavaScript, thereby changing the display state of the element.
The visibility attribute is used to specify the visibility of an element. It has the following optional values:
By setting the visibility attribute, the element can be hidden and displayed:
<div id="myDiv" style="visibility: hidden;">这是一个被隐藏的 div。</div> <button onclick="document.getElementById('myDiv').style.visibility='visible'">显示</button> <button onclick="document.getElementById('myDiv').style.visibility='hidden'">隐藏</button>
In the above code, we first set the visibility attribute of the div element to hidden through the style attribute, that is, hidden the element. Then the button click operation is implemented through the onclick events of the two button elements and JavaScript, thereby changing the display state of the element.
The opacity attribute is used to specify the transparency of the element. The value range is 0~1, 0 means completely transparent, and 1 means opaque. By setting the opacity attribute, the fade-out and fade-out effects of the element can be achieved:
<div id="myDiv" style="opacity: 0;">这是一个被隐藏的 div。</div> <button onclick="show()">显示</button> <button onclick="hide()">隐藏</button> <script> function show() { var div = document.getElementById("myDiv"); div.style.opacity = 1; div.style.transition = "opacity 1s"; } function hide() { var div = document.getElementById("myDiv"); div.style.opacity = 0; div.style.transition = "opacity 1s"; } </script>
In the above code, we realize the fade-out and fade-out effects of the div element by setting the opacity attribute and transition attribute of the div element . When the button is clicked, set the opacity attribute of the div element to the corresponding value (0 or 1) through JavaScript, and then set the transition attribute to the corresponding time to achieve the fading and fading effects.
Summary
The above three methods can all achieve the effect of hiding and displaying HTML elements, but in different situations, they may have different effects. It is necessary to choose the appropriate method according to the specific needs and scenarios.
The above is the detailed content of html hide show. For more information, please follow other related articles on the PHP Chinese website!