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

• 做者：陈大鱼头
• github： KRISACHAN
• 连接：github.com/YvetteLau/S…
• 背景：最近高级前端工程师 刘小夕 在 github 上开了个每一个工做日布一个前端相关题的 repo，怀着学习的心态我也参与其中，如下为个人回答，若是有不对的地方，很是欢迎各位指出。

隐藏类型

可见性	屏幕可见	可访问树
彻底隐藏	隐藏	隐藏
语义上隐藏	可见	隐藏
视觉上隐藏	隐藏	可见

彻底隐藏

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

若是你、喜欢探讨技术，或者对本文有任何的意见或建议，你能够扫描下方二维码，关注微信公众号“ 鱼头的Web海洋”，随时与鱼头互动。欢迎！衷心但愿能够碰见你。