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.

1. Use the display attribute

The display attribute is used to specify the display mode of an element. It has the following optional values:

• none : The element is not displayed and does not take up space.
• block: Elements are displayed at block level, with line breaks before and after.
• inline: The element is displayed inline, without line breaks before and after.
• inline-block: The element is displayed at the inline block level, with no line breaks before and after, but attributes such as width and height can be set.

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.

2. Use visibility attribute

The visibility attribute is used to specify the visibility of an element. It has the following optional values:

• visible: The element is visible.
• hidden: The element is not visible, but still takes up space.

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.

3. Use the opacity attribute

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!