js实现hide

隐藏元素的 JavaScript 实现方法

使用 style.display 属性 通过设置元素的 display 属性为 none 可以隐藏元素，同时不保留其占据的空间：

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

使用 style.visibility 属性 设置 visibility 为 hidden 会隐藏元素但保留其占据的空间：

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

使用 classList 添加 CSS 类 定义一个隐藏类并通过 JavaScript 添加：

.hidden {
    display: none;
}

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

使用 hidden 属性 HTML5 原生支持的隐藏属性：

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

通过透明度隐藏 设置元素完全透明但保留布局空间：

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

注意事项

• display: none 会触发重排（reflow），影响性能
• visibility: hidden 仍可被屏幕阅读器读取
• opacity: 0 元素仍可交互，需配合 pointer-events: none