JavaScript 如何動態隱藏和顯示 HTML 元素？-js教程-PHP中文網

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

Linda Hamilton

發布： 2024-12-15 21:02:29

原創

666 人瀏覽過

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中文網其他相關文章！