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

• 作者：陈大鱼头
• 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海洋”，随时与鱼头互动。欢迎！衷心希望可以遇见你。