1、隐藏元素的方法
- display: none:渲染树不会包含该渲染对象,因此该元素不会在页面中占据位置,也不会响应绑定的监听事件。
- visibility: hidden:元素在页面中仍占据空间,但是不会响应绑定的监听事件。
- opacity: 0:将元素的透明度设置为 0,来实现元素的隐藏。元素在页面中仍然占据空间,并且能够响应元素绑定的监听事件。
- position: absolute:通过使用绝对定位将元素移除可视区域内,以此来实现元素的隐藏,不会影响布局,能够响应元素绑定的监听事件。
- z-index: 负值:来使其他元素遮盖住该元素,以此来实现隐藏。
- transform: scale(0,0):将元素缩放为 0,来实现元素的隐藏。这种方法下,元素仍在页面中占据位置,但是不会响应绑定的监听事件。
- clip/clip-path :使用元素裁剪的方法来实现元素的隐藏,这种方法下,元素仍在页面中占据位置,但是不会响应绑定的监听事件。
2、总结
- visibility:影响布局(占据空间),影响交互(不会响应绑定事件);
- opacity:影响布局(占据空间),不影响交互(会响应绑定事件);
- display:不影响布局(不占据空间),影响交互;
- position:不影响布局,不影响交互;
3、display:none与visibility:hidden的区别:
1)在渲染树中
display:none 会让元素完全从渲染树中消失,渲染时不会占据任何空间;
visibility:hidden 不会让元素从渲染树中消失,渲染的元素还会占据相应的空间,只是内容不可见。
2)是否是继承属性
display:none 是非继承属性,子孙节点会随着父节点从渲染树消失,通过修改子孙节点的属性也无法显示;
visibility:hidden 是继承属性,子孙节点消失是由于继承了hidden,通过设置visibility:visible可以让子孙节点显示;
3)修改常规文档流中元素的 display 通常会造成文档的重排(不占据空间),但是修改visibility属性只会造成本元素的重绘(占据空间);
4)如果使用读屏器,设置为display:none的内容不会被读取,设置为visibility:hidden的内容会被读取。