在前端开发中，我们经常需要操作 DOM 元素的可见性。而 jQuery 中的 hide() 方法是一个非常方便的工具，可以快速地将选定元素设置为隐藏状态。但是，在某些情况下，我们可能无法或不想使用 jQuery。那么，在这种情况下，有什么等效的方法可以达到同样的效果呢？本文将介绍几个实现等效于 hide() 方法的纯 JavaScript 方法。
直接修改 style 属性
最简单的方法是直接修改元素的 style 属性。通过将 display 属性设置为 none，可以让元素看起来像被隐藏了一样：
<div id="my-element">我要被隐藏</div>
document.getElementById("my-element").style.display = "none";这会将 id 为 "my-element" 的元素隐藏起来。这种方法的好处是它非常简单明了，适用于简单的 DOM 操作。但是，如果你需要在代码中多次调用此方法，则很难保持代码的可维护性。而且，如果你需要在之后的代码中重新显示该元素，则必须再次将 display 属性设置为 'block' 或其他适当的值。
使用 CSS 类
另一种方法是使用 CSS 类来控制元素的可见性。可以在 CSS 文件中定义一个 .hidden 类，将其设置为 display: none;。然后，通过使用JavaScript代码将此类添加到你要隐藏的元素上：
.hidden {
display: none;
}<div id="my-element">我要被隐藏</div>
document.getElementById("my-element").classList.add("hidden");这将把 id 为 "my-element" 的元素隐藏起来，因为它现在拥有了 .hidden 类。同样，如果你需要在之后的代码中重新显示该元素，则必须将该类从元素上移除：
document.getElementById("my-element").classList.remove("hidden");这种方法的好处是它更具可扩展性和可维护性，因为你可以在 CSS 中定义多个类，并在 JavaScript 中轻松地切换它们。
使用 inline styles
最后一种方法是使用内联样式属性。通过将 style 属性设置为 display: none;，可以让元素看起来像被隐藏了一样：
<div id="my-element" style="display: none;">我要被隐藏</div>
document.getElementById("my-element").style.display = "none";这与直接修改 style 属性的方法类似，但是它的好处是，如果你需要再次显示该元素，则不需要再次设置 display 属性。只需要将 style 属性设置为空字符串即可：
document.getElementById("my-element").style.display = "";这将完全删除 style 属性，从而将元素恢复到其默认样式。然而，这种方法存在一个缺点，就是它会破坏 HTML 和 CSS 的分离原则，可能会导致代码混乱，难以维护。
总结
以上三种方法都可以用来实现等效于 jQuery hide() 方法的功能。选择哪种方法取决于具体情况，包括你要隐藏的元素数量、是否需要在之后重新显示元素以及代码的可扩展性和可维护性等因素。无论你选择哪种方法，在实际项目中都应该选择最符合项目需求的方法。
示例代码： https://codepen.io/chatgpt/pen/KKdQJNG
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8580
