JavaScript 如何动态隐藏和显示 HTML 元素？

使用 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中文网其他相关文章！