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