html 隱藏 顯示

HTML 隱藏並顯示

在 HTML 程式碼中，有時需要對某些元素進行隱藏和顯示的動作。在本文中，我們將討論 HTML 中隱藏和顯示元素的幾種方法。

1. 使用display 屬性

display 屬性用來指定一個元素的顯示方式，有以下幾個可選值：

• none ：元素不顯示，不佔空間。
• block：元素以區塊級顯示，前後都有換行符。
• inline：元素以行內顯示，前後無換行符號。
• inline-block：元素以行內塊級顯示，前後無換行符，但可設定寬高等屬性。

透過設定display 屬性，可以實現元素的隱藏和顯示：

<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>

上述程式碼中，我們先透過style 屬性將div 元素的display 屬性設為none，也就是隱藏該元素。然後透過兩個 button 元素的 onclick 事件和 JavaScript 來實現按鈕的點擊操作，進而改變元素的顯示狀態。

2. 使用visibility 屬性

visibility 屬性用於指定元素的可見性，有下列幾個可選值：

• visible：元素可見。
• hidden：元素不可見，但仍佔用空間。

透過設定visibility 屬性，可以實現元素的隱藏和顯示：

<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>

上述程式碼中，我們先透過style 屬性將div 元素的visibility 屬性設為hidden，也就是隱藏該元素。然後透過兩個 button 元素的 onclick 事件和 JavaScript 來實現按鈕的點擊操作，進而改變元素的顯示狀態。

3. 使用 opacity 屬性

opacity 屬性用於指定元素的透明度，取值範圍為 0~1，0 表示完全透明，1 表示不透明。透過設定opacity 屬性，可以實現元素的漸隱和漸顯效果：

<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>

上述程式碼中，我們透過設定div 元素的opacity 屬性和transition 屬性，實現了div 元素的漸隱和漸顯效果。當按鈕被點擊時，透過 JavaScript 將 div 元素的 opacity 屬性設定為對應的值（0 或 1），然後將 transition 屬性設定為對應的時間，來實現漸隱和漸顯的效果。

總結

以上三種方法都可以實現 HTML 元素的隱藏和顯示效果，但在不同情況下，可能會有不同的使用效果。需要根據特定的需求和場景選擇適合的方法來實現。

以上是html 隱藏 顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章！