使用 JavaScript 按类隐藏所有元素

作者

使用 JavaScript 按类隐藏所有元素

Hide all elements by Class using JavaScript

按类隐藏所有元素：

  1. 使用getElementsByClassName方法获取 HTML 元素的集合。
  2. 使用循环遍历集合for...of。
  3. 将每个元素的style.display属性设置为none。

以下是本文示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>

    <button id="btn">Click me</button>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  const boxes = document.getElementsByClassName('box');

  for (const box of boxes) {
    // 👇️ Remove element from DOM
    box.style.display = 'none';

    // 👇️ hide element (still takes up space on page)
    // box.style.visibility = 'hidden';
  }
});

我们使用
document.getElementsByClassName()
方法获取HTMLCollection具有特定类的元素。

我们使用
for…of
循环遍历集合，在每次迭代中，我们将元素的
显示属性设置
none为隐藏它。

请注意，该getElementsByClassName方法返回一个 HTML 集合而不是数组。如果要将集合转换为数组，请将其传递给
Array.from方法。

索引.js
const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  // 👇️ Use Array.from to convert to array
  const boxes = Array.from(document.getElementsByClassName('box'));

  boxes.forEach(box => {
    // 👇️ Remove element from DOM
    box.style.display = 'none';

    // 👇️ hide element (still takes up space on page)
    // box.style.visibility = 'hidden';
  });
});

将 转换HTMLCollection为数组后，我们就可以在 JavaScript 中使用任何支持数组的方法，例如Array.forEach.

要隐藏每个元素，我们将其display属性设置为none，但是您可能需要

根据您的用例使用可见性属性。

当元素的display属性设置为 时none，该元素将从 DOM 中移除并且对布局没有影响。文档呈现为好像该元素不存在一样。

另一方面，当元素的visibility属性设置为 时hidden，它仍会占用页面空间，但该元素是不可见的（未绘制）。它仍然会像往常一样影响您页面上的布局。

下面是一个使用该visibility属性按类隐藏所有元素的示例。

索引.js
const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  const boxes = Array.from(document.getElementsByClassName('box'));

  boxes.forEach(box => {
    // 👇️ hide element (still takes up space on page)
    box.style.visibility = 'hidden';
  });
});

如果单击该按钮，您会看到这些div元素消失了，但它们仍会占用页面空间。

visibility这就是设置tohidden和displayto
之间的区别none。

如果您希望避免移动页面上的内容（这可能会让用户感到困惑），这可能是您的首选解决方案。

–

发表评论