前端進階之如何隱藏頁面中的某個元素？

• 做者：陳大魚頭
• 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海洋」，隨時與魚頭互動。歡迎！衷心但願能夠碰見你。