首頁 >web前端 >js教程 >JavaScript 如何動態隱藏和顯示 HTML 元素?

JavaScript 如何動態隱藏和顯示 HTML 元素?

Linda Hamilton
Linda Hamilton原創
2024-12-15 21:02:29668瀏覽

How Can JavaScript Dynamically Hide and Show HTML Elements?

使用 JavaScript 動態隱藏元素

假設您有一個允許使用者編輯文字元素的按鈕。單擊按鈕後,您可能希望按鈕消失,並將文字元素替換為文字區域以進行編輯。以下是使用JavaScript 實現此目的的方法:

function showStuff(id, text, btn) {
    // Display the element with the given ID
    document.getElementById(id).style.display = 'block';

    // Hide the lorem ipsum text
    document.getElementById(text).style.display = 'none';

    // Hide the link
    btn.style.display = 'none';
}

在提供的HTML 程式碼片段中,您可以按以下方式修改它:

<td class="post">

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

點擊「編輯」連結時,發生以下操作:

  • 包含文字區域的隱藏「answer1」範圍變為可見。
  • 包含 lorem ipsum 文字的「text1」範圍被隱藏。
  • 「編輯」連結本身變得不可見。

以上是JavaScript 如何動態隱藏和顯示 HTML 元素?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn