js实现hidden

实现元素隐藏的 JavaScript 方法

通过 JavaScript 隐藏元素有多种方式，以下是常见方法及其区别：

直接修改 style.display 属性

document.getElementById('elementId').style.display = 'none';

此方法将元素从文档流中移除，隐藏后不占据空间。需通过 display: block 或其它合适值恢复显示。

修改 style.visibility 属性

document.getElementById('elementId').style.visibility = 'hidden';

元素隐藏后仍占据布局空间，恢复显示使用 visibility: visible。

通过 CSS 类切换

document.getElementById('elementId').classList.add('hidden-class');

需提前定义 CSS 类：

.hidden-class {
  display: none; /* 或 visibility: hidden */
}

设置 hidden 属性（HTML5）

document.getElementById('elementId').hidden = true;

这是 HTML5 原生属性，等同于 display: none。恢复显示设为 false。

修改透明度

document.getElementById('elementId').style.opacity = '0';

元素仍保留布局空间，视觉上不可见。可配合 pointer-events: none 禁用交互。

注意事项

• display: none 会影响页面布局，适合需要重排的场景
• visibility: hidden 适合需要保留元素占位的场景
• 频繁切换显示/隐藏时，CSS 类切换性能优于直接修改样式
• 屏幕阅读器通常不会读取 display: none 或 hidden 属性的内容