修改 display 属性（最常用）
这是最直接、最常用的方法，通过将 display 属性设置为 none，元素会从正常的文档流中完全移除，不占据任何空间，并且也不会响应任何事件（如点击）。
（图片来源网络，侵删）
如何实现：
- 获取
<div>元素：使用document.getElementById()或其他 DOM 选择方法。 - 设置
style.display：将其值设为'none'。
示例代码：
假设你有以下 HTML 结构：
<div id="myDiv"> 这是一段需要隐藏的文字。 <button id="toggleButton">点击隐藏/显示</button> </div>
对应的 JavaScript 代码：
// 1. 获取 div 元素
const myDiv = document.getElementById('myDiv');
// 2. 获取按钮，用于触发隐藏/显示
const toggleButton = document.getElementById('toggleButton');
// 3. 为按钮添加点击事件监听器
toggleButton.addEventListener('click', function() {
// 检查当前 div 的 display 属性是否为 'none'
if (myDiv.style.display === 'none') {
// 如果是，则显示它（恢复默认值）
myDiv.style.display = '';
} else {
// 如果不是，则隐藏它
myDiv.style.display = 'none';
}
});
优点：
- 简单直接,效果明确。
- 元素完全从布局中消失,不会影响其他元素的排列。
缺点：
（图片来源网络，侵删）
- 隐藏和显示时,元素会重新进入或退出文档流，可能会导致页面布局发生“跳动”。
修改 visibility 属性
这种方法与 display 不同，设置 visibility: hidden; 会使元素变为不可见，但它仍然占据其原始的文档流空间，页面布局不会改变。
如何实现：
将元素的 style.visibility 属性设置为 'hidden'（隐藏）或 'visible'（显示）。
示例代码：
const myDiv = document.getElementById('myDiv');
// 隐藏 div
myDiv.style.visibility = 'hidden';
// 显示 div
myDiv.style.visibility = 'visible';
优点：
- 不会影响页面布局,其他元素不会移动。
- 隐藏的元素仍然可以响应 JavaScript 事件（虽然你看不见它）。
缺点：
（图片来源网络，侵删）
- 元素虽然不可见,但仍占据空间，有时会不美观（一个看不见的按钮仍然可以点击）。
修改 opacity 属性
这种方法通过设置透明度为 0 来“隐藏”元素，元素在视觉上消失了，但它仍然存在于文档流中，占据空间，并且可以响应用户交互。
如何实现：
将元素的 style.opacity 属性设置为 0（完全透明）或 1（完全不透明）。
注意： 为了让过渡效果更平滑，通常建议同时设置 transition 属性。
示例代码：
<style>
#myDiv {
/* 添加一个平滑的过渡效果，持续0.3秒 */
transition: opacity 0.3s ease-in-out;
}
</style>
<div id="myDiv">这是一段会淡出的文字。</div>
<button id="fadeButton">点击淡入/淡出</button>
const myDiv = document.getElementById('myDiv');
const fadeButton = document.getElementById('fadeButton');
fadeButton.addEventListener('click', function() {
if (myDiv.style.opacity === '0') {
myDiv.style.opacity = '1'; // 淡入
} else {
myDiv.style.opacity = '0'; // 淡出
}
});
优点：
- 可以实现非常平滑的淡入淡出动画效果。
- 适合用于模态框、提示框等需要优雅消失的场景。
缺点：
- 元素仍然占据空间并可以交互,可能需要额外的逻辑来禁用交互（
pointer-events: none;）。
修改 height、width 或 overflow 属性
这是一种更“暴力”的隐藏方法，通过将元素的尺寸（高度或宽度）设置为 0 来隐藏它，通常需要配合 overflow: hidden; 来防止内容溢出。
如何实现：
const myDiv = document.getElementById('myDiv');
// 隐藏：将高度和宽度设为0，并隐藏溢出内容
myDiv.style.height = '0';
myDiv.style.width = '0';
myDiv.style.overflow = 'hidden';
// 显示：恢复原始高度和宽度
// myDiv.style.height = 'auto'; // 注意：直接设置回 'auto' 可能无法通过 style 属性完美恢复
// myDiv.style.width = 'auto';
注意： 这种方法不常用，因为恢复原始尺寸比较麻烦，通常需要预先存储原始尺寸。
总结与对比
| 方法 | CSS 属性 | 是否占据空间 | 是否响应事件 | 主要用途 |
|---|---|---|---|---|
display |
display: none; |
否 | 否 | 最常用，彻底移除元素，不保留位置。 |
visibility |
visibility: hidden; |
是 | 是 | 隐藏元素但保留其位置，不希望布局变动时。 |
opacity |
opacity: 0; |
是 | 是 | 创建淡入淡出动画效果。 |
height/width |
height: 0; width: 0; |
否（尺寸为0） | 否 | 较少用，通常用于配合动画的复杂效果。 |
最佳实践
- 如果你想让元素彻底消失，并且不希望它影响页面布局：使用
display: none;，这是最标准、最可靠的方法。 - 如果你只是想让元素暂时不可见，但需要保持其占位：使用
visibility: hidden;。 - 如果你需要创建平滑的显示/隐藏动画：使用
opacity: 0;并配合transition属性。
在实际开发中,display: none; 和 opacity + transition 是最常用于控制元素显隐的两种技术。
