隐藏元素的方法
... 2025-7-10 大约 1 分钟
# display
- 设置元素是否展示
- 不被页面渲染，页面不再保留元素位置
- 不会被子元素继承，毕竟子类也不会渲染
- 动态改变此属性会引起回流
- 无法进行 DOM 事件监听
- transition：transition 不支持 display
el {
display: none;
}
1
2
3
2
3
# visibility
- 设置元素是否可见
- 被渲染，但隐藏。页面仍保留元素位置
- 会被子元素继承，子元素可以通过设置
visibility:visible来取消隐藏 - 动态改变此属性会引起重绘，性能较高
- 无法进行 DOM 事件监听
- transition：visibility 会立即显示，隐藏时会延时
el {
visibility: hidden;
}
1
2
3
2
3
# opacity
- 设置元素的不透明度
- 透明度为 100%，页面仍保留元素位置
- 会被子元素继承，子元素并不能通过 opacity:1 来取消隐藏
- 提升为合成层，不会引起重绘，性能较高
- 可以进行 DOM 事件监听
- transition：opacity 可以延迟显示和隐藏
el {
opacity: 0;
}
1
2
3
2
3
# 关于回流和重绘
回流:
通过构造渲染树，我们将可见 DOM 节点以及它对应的样式结合起来，可是我们还需要计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流.
重绘:
屏幕的一部分重画，不影响整体布局，比如某个 CSS 的背景色变了，但元素的几何尺寸和位置不变。
# 其他
/* 其他莫名其妙的方法：
* 移出可视区域：使用绝对定位， transform:translate(-99999px)
* transform:scale(0)
* 宽高设置为0
* 文字：字体大小设置为0，或字体颜色为透明
* 被其他元素遮盖：z-index:-99999
* css3 的裁剪(cli-path)，filter的 blur(999);
*/
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9