如何使用 JavaScript 的「display」屬性隱藏和顯示 HTML 元素？

使用 JavaScript 隱藏和顯示元素

在 Web 開發中，控制頁面元素的可見性是一個常見的需求。在本文中，我們將探討如何使用顯示樣式屬性在 JavaScript 中隱藏和顯示元素。

要隱藏元素，我們將其顯示屬性設為 none。這將從頁面的視覺流中刪除該元素，使其對使用者不可見。要顯示隱藏元素，我們只需將其顯示屬性設定回可見值，例如區塊或內聯。

範例場景：隱藏和顯示編輯功能

讓我們增強一個簡單的HTML 結構具有增強功能：

<td>
  <a href="#" onclick="showStuff('answer1'); return false;">Edit</a>
  <span>

此程式碼顯示「編輯」連結和隱藏文字區域。點擊連結應顯示文字區域並隱藏“Lorem ipsum”文字。

解

我們可以修改showStuff 函數來處理隱藏和顯示元素：

function showStuff(id, text, btn) {
    document.getElementById(id).style.display = 'block';
    // hide the lorem ipsum text
    document.getElementById(text).style.display = 'none';
    // hide the link
    btn.style.display = 'none';
}

在這裡，我們：

• 透過>透過設定目標元素（id）的display屬性來顯示它阻止。
• 透過將其顯示屬性設為無來隱藏「Lorem ipsum」文字（文字）。
• 透過將其顯示屬性設為無來隱藏「編輯」連結（btn）。

修改範例

將這些變更合併到HTML:

<td>
  <a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
  <span>

按一下「編輯」連結時，會觸發showStuff 函數，該函數顯示文字區域，隱藏“Lorem ipsum”文本，並隱藏連結本身。

以上是如何使用 JavaScript 的「display」屬性隱藏和顯示 HTML 元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！