使用 JavaScript 按类隐藏元素

作者

使用 JavaScript 按类名隐藏元素

Hide an Element by Class using JavaScript

要按类隐藏元素：

  1. 使用document.getElementsByClassName()选择具有特定类的元素。
  2. 访问索引处的集合以获取要隐藏的元素。
  3. 将元素的style.visibility属性设置为hidden。

以下是本文示例的 HTML。

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

  <body>
    <div class="box">Box</div>

    <button id="btn">Hide Box</button>

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

这是相关的 JavaScript 代码。

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

btn.addEventListener('click', () => {
  const box = document.getElementsByClassName('box')[0];
  // 👇️ hides element (still takes up space on page)
  box.style.visibility = 'hidden';

  // 👇️ removes element from DOM
  // box.style.display = 'none';
});

按类隐藏元素

单击按钮元素时，该div元素将隐藏。

我们使用
document.getElementsByClassName
方法获取一个HTMLCollection元素，从中我们访问了第一个元素（索引 0）。

要隐藏具有特定类的所有元素：

  1. 使用document.getElementsByClassName()选择具有特定类的元素。
  2. 使用for...of循环遍历HTMLCollection.
  3. 在每次迭代中，将元素的visibility属性设置为hidden。
索引.js
const btn = document.getElementById('btn');

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

  for (const box of boxes) {
    // 👇️ hides element
    box.style.visibility = 'hidden';

    // 👇️ removes element from DOM
    // box.style.display = 'none';
  }
});

此代码片段隐藏了类为box.

我们在示例中使用了
visibility css 属性，但是您可能需要
display属性，具体取决于您的用例。

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

When an element’s display property is set to none, the element is removed
from the DOM and has no effect on the layout. The document is rendered as though
the element doesn’t exist.

Here is an example that uses the display property to hide an element by its
class name.

index.js
const btn = document.getElementById('btn');

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

  // 👇️ removes element from DOM
  box.style.display = 'none';
});

按类隐藏元素显示无

The difference is that when the element’s display property is set to none, it
no longer takes space on the page.

If you click on the button element from the example, the div element is removed from the DOM and the button element takes its place.

However, if you set the element’s visibility property to hidden, the div
element still takes up space on the page, but is invisible.

–

发表评论