原生js隐藏元素

在原生JavaScript中隐藏元素主要有以下几种方式：

一、基础概念

1. DOM操作
   • JavaScript可以通过操作文档对象模型（DOM）来改变HTML元素的样式或属性，从而达到隐藏元素的目的。DOM将HTML文档表示为一个节点树，每个HTML元素都是一个节点，可以通过JavaScript获取这些节点并对其操作。

二、相关类型及实现方式

1. 修改元素的style.display属性
   • 优势：简单直接，可以完全移除元素在页面布局中的显示，并且不会占据空间。
   • 示例代码：
   • 示例代码：
   • 应用场景：当需要在页面上完全隐藏某个元素，并且后续可能不会再显示该元素时使用。例如隐藏登录前的欢迎提示框。

• 修改元素的style.visibility属性
  • 优势：元素仍然占据页面的空间，只是不可见，对于布局的影响较小。
  • 示例代码：
  • 示例代码：
  • 应用场景：当需要在隐藏元素的同时保持页面布局不变时使用。比如隐藏一些辅助性的说明文字，在特定条件下再显示。
• 通过添加/移除CSS类来隐藏元素
  • 优势：可以将样式与JavaScript逻辑分离，便于维护和管理样式。可以在CSS中定义好隐藏的样式规则，然后在JavaScript中通过添加或移除类来控制元素的显示与隐藏。
  • 示例代码：
    • 首先在CSS中定义一个隐藏类：
    • 首先在CSS中定义一个隐藏类：
    • 然后在JavaScript中操作：
    • 然后在JavaScript中操作：
  • 应用场景：在多个地方需要对相同类型的元素进行显示/隐藏控制时非常有用。例如在一个多页面应用中，对于一些导航菜单项的显示和隐藏统一通过添加/移除类来管理。