隐藏类型
可见性 | 屏幕可见 | 可访问树 |
---|---|---|
完全隐藏 | 隐藏 | 隐藏 |
语义上隐藏 | 可见 | 隐藏 |
视觉上隐藏 | 隐藏 | 可见 |
完全隐藏
此方法会让元素从渲染树中消失,渲染的时候不占据任何空间,且不可进行DOM操作。
hide {
display: none;
}
此方法相当于 display: none;
<div hidden></div>
语义上的隐藏
此方法使读屏软件不可读,但正常占据空间,且可进行DOM操作。
<div aria-hidden="true"></div>
视觉上的隐藏
此方法使肉眼不可见,但占据正常空间,且不可进行DOM操作。
hide {
visibility: hidden;
}
此方法使肉眼不可见,但占据正常空间,且可进行DOM操作。
hide {
opacity: 0;
}
此方法使肉眼不可见,但占据正常空间,且可进行DOM操作。
hide {
transform: scale(0, 0);
}
此方法把要隐藏的DOM移出到可视位置,不占据正常流,且可进行DOM操作。
:root {
--biu: -999999px;
}
hide {
position: absolute;
left: var(--biu);
top: var(--biu);
}
此方法使肉眼不可见,但占据正常空间,且可进行DOM操作。
hide {
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}
此方法使肉眼不可见,但占据正常空间,且可进行DOM操作。
:root {
--biu: rgba(0, 0, 0, 0);
}
hide {
border: 1px solid currentcolor;
color: var(--biu);
background: currentcolor;
...and so on;
}