经典真题
- 隐藏页面元素的方法有哪些？
顾名思义，就是页面上看不到该元素。分为以下几类：
- 完全隐藏：直接从DOM树上移除，不占据空间
- 视觉上隐藏：界面上不可见，但是仍然占据空间
- 语义上隐藏：读屏软件不可读，但占据空间
完全隐藏：
display属性
直接从dom树移除，后面的元素都往前移动。
display:none
hidden属性
hidden是h5新增的标签的属性，相当于display:none。直接写在元素上。
<div hidden>这是一个标签，hidden是标签属性</div>
视觉上隐藏
opacity
只是变透明了
opacity:0
visibility属性
visibility: hidden;
visibility: collapse;
绝对定位
{
position:absolute;
top:-999px;
left:-999px;
}
宽高为0
{
width:0;
height:0;
overflow:hidden;
}
裁剪元素
这是h5新增的属性。
{
clip-path: polygon(0px 0px,0px 0px, 0px 0px,0px 0px);
}
语义上隐藏
aria-hidden属性
只是语义上隐藏，使得读屏软件不可读，但是元素仍占据空间并且页面上是可见的。
<div aria-hidden="true">123</div>
