如何使用 JavaScript 隱藏和顯示 HTML 元素？

如何在 JavaScript 中隱藏元素

隱藏網頁上的元素可以增強使用者體驗並提高網站的視覺吸引力。在 JavaScript 中實現此目的的有效方法是利用顯示樣式屬性。

交互後隱藏元素

考慮這樣的場景：您有一個“編輯”鏈接，單擊該鏈接後，應該顯示可編輯的文本區域。此外，您希望在使用者開始編輯後隱藏佔位符文字（“Lorem ipsum”）。您可以透過修改以下JavaScript 函數來實現此目的：

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 是您想要使其可見的元素的ID（例如， textarea)。
• text 是您要隱藏的元素的 ID（例如，「Lorem ipsum」文字）。
• btn 是對觸發操作的元素的引用（例如，「編輯」連結）。

因此，當「編輯」連結為點擊後，JavaScript 會找到對應的文字區域並使其可見。它還會找到佔位符文字並將其隱藏。最後，它隱藏了「編輯」連結本身，以防止重複的編輯操作。

範例程式碼

要實作此解決方案，您可以使用下方修改過的HTML 程式碼：

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

此範例示範如何在使用者點擊「編輯」連結時隱藏佔位符文字和「編輯」連結。其結果是為您的網頁提供乾淨直覺的編輯介面。

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