如何使用 JavaScript 按类隐藏 HTML 元素？

在 Web 开发中，我们经常需要通过 JavaScript 来操纵 HTML 元素。其中，隐藏元素是一个常见的需求。本文将介绍如何使用 JavaScript 按类隐藏 HTML 元素。

1. 获取元素

在隐藏元素之前，我们需要先获取需要隐藏的 HTML 元素。获取元素的方法有很多种，最常见的方法是使用 document.querySelector() 或 document.querySelectorAll()。

// 获取 class 为 "hidden-element" 的第一个元素
var element = document.querySelector('.hidden-element');

// 获取 class 为 "hidden-element" 的所有元素
var elements = document.querySelectorAll('.hidden-element');

2. 隐藏元素

获取到 HTML 元素之后，我们可以使用 CSS 属性 display 或 visibility 把元素隐藏起来。其中，display 属性隐藏元素后，元素会完全从页面中消失，而 visibility 属性则是将元素隐藏起来，但仍占据原来的位置。

使用 display 属性隐藏元素

使用 display 属性来隐藏元素很简单，只需要将元素的 display 属性设置为 none 即可：

element.style.display = 'none';

如果要隐藏多个元素，可以使用循环来逐个隐藏元素：

for (var i = 0; i < elements.length; i++) {
  elements[i].style.display = 'none';
}

使用 visibility 属性隐藏元素

使用 visibility 属性来隐藏元素同样也很简单，只需要将元素的 visibility 属性设置为 hidden 即可：

element.style.visibility = 'hidden';

如果要隐藏多个元素，可以使用循环来逐个隐藏元素：

for (var i = 0; i < elements.length; i++) {
  elements[i].style.visibility = 'hidden';
}

3. 显示元素

如果要显示被隐藏的 HTML 元素，只需要将元素的 display 或 visibility 属性重新设置为 block 或 visible 即可：

// 显示元素（使用 display 属性）
element.style.display = 'block';

// 显示元素（使用 visibility 属性）
element.style.visibility = 'visible';

结论

通过本文的介绍，我们学会了如何使用 JavaScript 按类隐藏 HTML 元素。这一技术是 Web 开发中常用的操作之一。希望本文能够对你有帮助，谢谢阅读！