如何使用 JavaScript 有效隐藏和取消隐藏 DIV 元素？

使用 JavaScript 隐藏和取消隐藏“div”元素

让我们考虑一个场景，您想要切换两个“div”元素的可见性在网页上。您有触发元素显示和隐藏的按钮。但是，您遇到的问题是，只有第一个函数隐藏其目标“div”，而第二个函数则不然。

JavaScript 中的元素可见性控制

隐藏或在 JavaScript 中显示元素，您可以操作它们的样式属性。对于显示控制，有两个选项：

• 显示：设置元素的可见性。

  • 'none'：隐藏元素。
  • 'block'：将元素显示为独立的block。
  • 'inline'：显示与周围文本对齐的元素。
  • 'inline-block'：与 'inline' 类似，但允许元素具有宽度和高度。

• 可见性： 控制元素的可见性同时保持其空间。

  • 'hidden'：隐藏元素但保留其空间。
  • 'visible'：显示元素。

隐藏一系列元素

如果要一次隐藏多个元素，可以使用函数迭代它们并将其显示属性设置为“none”：

function hide (elements) {
  elements = elements.length ? elements : [elements];
  for (var index = 0; index < elements.length; index++) {
    elements[index].style.display = 'none';
  }
}

用法示例：

hide(document.querySelectorAll('.target')); // Hides all elements with the 'target' class.
hide(document.querySelector('.target')); // Hides the first element with the 'target' class.
hide(document.getElementById('target')); // Hides the element with the ID 'target'.

通过利用这些技术，您可以有效地显示或隐藏“div”元素以及网页上的任何其他 HTML 元素。

以上是如何使用 JavaScript 有效隐藏和取消隐藏 DIV 元素？的详细内容。更多信息请关注PHP中文网其他相关文章！