前端进阶之隐藏页面中的某个元素

隐藏类型

可见性	屏幕可见	可访问树
完全隐藏	隐藏	隐藏
语义上隐藏	可见	隐藏
视觉上隐藏	隐藏	可见

完全隐藏

此方法会让元素从渲染树中消失，渲染的时候不占据任何空间，且不可进行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;
}