有趣的css—隱藏元素的7種思路

_Fatman發表於2021-02-02

css隱藏元素的7種思路

前言

display、visibility、opacity三個屬性隱藏元素之間的異同點一直是前端面試面試的常考題。

屬性	值	是否在頁面上顯示	註冊點選事件是否有效	是否存在於可訪問性樹中
display	none	否	否	否
visibility	hidden	否	否	是
opacity	0	否	是	是

除了display、visibility、opacity三個屬性可以隱藏元素之外，是否還存在其它屬性可以隱藏元素呢？它們之間又存在什麼必然的聯絡呢？這就是我們今天要討論的問題。

注：由於篇幅有限，本文並未提及一些像filter:alpha(opacity=0); zoom:0;之類的相容屬性。

第一種：移除出可訪問性樹

display : none

display屬性可以設定元素的內部和外部顯示型別。將display設定為none會將元素從可訪問性樹中移除。

程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>display : none</title>
        <style type="text/css">
            div {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                display : none;
            }
        </style>
    </head>
    <body>
        <div>
            <button id="normal">按鈕</button>
        </div>
        <div>
            <button id="bt">按鈕</button>
        </div>

        <script type="text/javascript">
            let normal = document.getElementById('normal');
            let bt = document.getElementById('bt');
            normal.addEventListener('click',function(){
                alert('click normal');   
            })
            bt.addEventListener('click',function(){
                alert('click bt');   
            })
        </script>
    </body>
</html>

第二種：隱藏元素

visibility: hidden

將visibility設定為hidden會使元素不可見，但此時元素仍然位於可訪問性樹中(display: none時元素被移出可訪問性樹 )，註冊點選事件無效。

程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>visibility: hidden</title>
        <style type="text/css">
            div {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                visibility: hidden;
            }
        </style>
    </head>
    <body>
        <div>
            <button id="normal">按鈕</button>
        </div>
        <div>
            <button id="bt">按鈕</button>
        </div>

        <script type="text/javascript">
            let normal = document.getElementById('normal');
            let bt = document.getElementById('bt');
            normal.addEventListener('click',function(){
                alert('click normal');   
            })
            bt.addEventListener('click',function(){
                alert('click bt');   
            })
        </script>
    </body>
</html>

第三種：透明

opacity: 0

opacity(不透明度),取值範圍0(完全透明) ~ 1(完全不透明)，將opacity設定為0會使元素完全透明，此時元素不可見(因為它是透明的)，仍然位於可訪問性樹中，註冊點選事件有效。

程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>opacity: 0</title>
        <style type="text/css">
            div {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                opacity: 0;
            }
        </style>
    </head>
    <body>
        <div>
            <button id="normal">按鈕</button>
        </div>
        <div>
            <button id="bt">按鈕</button>
        </div>

        <script type="text/javascript">
            let normal = document.getElementById('normal');
            let bt = document.getElementById('bt');
            normal.addEventListener('click',function(){
                alert('click normal');   
            })
            bt.addEventListener('click',function(){
                alert('click bt');   
            })
        </script>
    </body>
</html>

transparent

將元素的background-color、color和border-color設定為transparent(透明)，此時元素不可見(因為它是透明的)，仍然位於可訪問性樹中,註冊點選事件有效。

程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>transparent</title>
        <style type="text/css">
            div {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                color: transparent;
                background-color: transparent;
                border-color: transparent;
            }
        </style>
    </head>
    <body>
        <div>
            <button id="normal">按鈕</button>
        </div>
        <div>
            <button id="bt">按鈕</button>
        </div>

        <script type="text/javascript">
            let normal = document.getElementById('normal');
            let bt = document.getElementById('bt');
            normal.addEventListener('click',function(){
                alert('click normal');   
            })
            bt.addEventListener('click',function(){
                alert('click bt');   
            })
        </script>
    </body>
</html>

rgba(0,0,0,0)

從技術上說，transparent是 rgba(0,0,0,0) 的簡寫，將元素的background-color、color和border-color設定為rgba(0,0,0,0)(透明)，此時元素不可見(因為它是透明的)，仍然位於可訪問性樹中,註冊點選事件有效。

程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>rgba(0,0,0,0)</title>
        <style type="text/css">
            div {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                color: rgba(0,0,0,0);
                background-color: rgba(0,0,0,0);
                border-color: rgba(0,0,0,0);
            }
        </style>
    </head>
    <body>
        <div>
            <button id="normal">按鈕</button>
        </div>
        <div>
            <button id="bt">按鈕</button>
        </div>

        <script type="text/javascript">
            let normal = document.getElementById('normal');
            let bt = document.getElementById('bt');
            normal.addEventListener('click',function(){
                alert('click normal');   
            })
            bt.addEventListener('click',function(){
                alert('click bt');   
            })
        </script>
    </body>
</html>

rgba只需要第四個引數為0即可達到隱藏元素的效果。

hsla(0,0%,0%,0)

hsla使用元素隱藏的機制與rgba一致，都是由第四個引數Alpha所控制的，將元素的background-color、color和border-color設定為hsla(0,0%,0%,0)，此時元素不可見(因為它是透明的)，仍然位於可訪問性樹中，註冊點選事件有效。

程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>hsla(0,0%,0%,0)</title>
        <style type="text/css">
            div {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                color: hsla(0,0%,0%,0);
                background-color: hsla(0,0%,0%,0);
                border-color: hsla(0,0%,0%,0);
            }
        </style>
    </head>
    <body>
        <div>
            <button id="normal">按鈕</button>
        </div>
        <div>
            <button id="bt">按鈕</button>
        </div>

        <script type="text/javascript">
            let normal = document.getElementById('normal');
            let bt = document.getElementById('bt');
            normal.addEventListener('click',function(){
                alert('click normal');   
            })
            bt.addEventListener('click',function(){
                alert('click bt');   
            })
        </script>
    </body>
</html>

hsla和rgba一致，只需要第四個引數為0即可達到隱藏元素的效果。

filter: opacity(0%)

filter(濾鏡) opacity(0% ~ 100%)轉化影像的透明程度,值範圍於0%(完全透明) ~ 100%(完全不透明)之間。將元素的filter設定為opacity(0%)，此時元素不可見(因為它是透明的)，仍然位於可訪問性樹中，註冊點選事件有效。

程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>filter: opacity(0%)</title>
        <style type="text/css">
            div {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                filter: opacity(0%);
            }
        </style>
    </head>
    <body>
        <div>
            <button id="normal">按鈕</button>
        </div>
        <div>
            <button id="bt">按鈕</button>
        </div>

        <script type="text/javascript">
            let normal = document.getElementById('normal');
            let bt = document.getElementById('bt');
            normal.addEventListener('click',function(){
                alert('click normal');   
            })
            bt.addEventListener('click',function(){
                alert('click bt');   
            })
        </script>
    </body>
</html>

第四種：縮放

transform: scale(0, 0)

將transform設定為scale(0, 0)會使元素在x軸和y軸上都縮放到0畫素，此元素會顯示，也會佔用位置，但是因為已經縮放到0%，元素和內容佔用畫素比為0*0，所以看不到此元素及其內容，也無法點選。

程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>transform: scale(0, 0)</title>
        <style type="text/css">
            div {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                transform: scale(0,0);
            }
        </style>
    </head>
    <body>
        <div>
            <button id="normal">按鈕</button>
        </div>
        <div>
            <button id="bt">按鈕</button>
        </div>

        <script type="text/javascript">
            let normal = document.getElementById('normal');
            let bt = document.getElementById('bt');
            normal.addEventListener('click',function(){
                alert('click normal');   
            })
            bt.addEventListener('click',function(){
                alert('click bt');   
            })
        </script>
    </body>
</html>

width: 0;height: 0;overflow: hidden

將width和height都設定為0，使元素佔用畫素比為0*0，但此時會出現兩種情況：
當元素的display屬性為inline時，元素內容會將元素寬高拉開；
當元素的display屬性為block或inline-block時，元素寬高為0，但元素內容依舊正常顯示，此時再加上overflow:hidden;即可裁剪掉元素外的元素內容。

這個方法跟transform: scale(0,0)的不同點在於：transform: scale(0,0)是將元素與內容都進行縮放，而此方法是將元素縮放到0px，再裁剪掉元素外的元素內容。

程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>width: 0;height: 0;overflow: hidden</title>
        <style type="text/css">
            div {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                width:0;
                height:0;
                overflow: hidden;
                border-width: 0;/* user agent stylesheet中border-width: 2px; */
                padding: 0;/* user agent stylesheet中padding: 1px 6px; */
            }
        </style>
    </head>
    <body>
        <div>
            <button id="normal">按鈕</button>
        </div>
        <div>
            <button id="bt">按鈕</button>
        </div>

        <script type="text/javascript">
            let normal = document.getElementById('normal');
            let bt = document.getElementById('bt');
            normal.addEventListener('click',function(){
                alert('click normal');   
            })
            bt.addEventListener('click',function(){
                alert('click bt');   
            })
        </script>
    </body>
</html>

第五種：旋轉

transform: rotateX(90deg)

將元素沿著X軸順時針旋轉90度達到隱藏元素的效果。

程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>transform: rotateX(90deg)</title>
        <style type="text/css">
            div {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                transform: rotateX(90deg);
            }
        </style>
    </head>
    <body>
        <div>
            <button id="normal">按鈕</button>
        </div>
        <div>
            <button id="bt">按鈕</button>
        </div>

        <script type="text/javascript">
            let normal = document.getElementById('normal');
            let bt = document.getElementById('bt');
            normal.addEventListener('click',function(){
                alert('click normal');   
            })
            bt.addEventListener('click',function(){
                alert('click bt');   
            })
        </script>
    </body>
</html>

transform: rotateY(90deg)

將元素沿著Y軸順時針旋轉90度達到隱藏元素的效果。

程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>transform: rotateY(90deg)</title>
        <style type="text/css">
            div {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                transform: rotateY(90deg);
            }
        </style>
    </head>
    <body>
        <div>
            <button id="normal">按鈕</button>
        </div>
        <div>
            <button id="bt">按鈕</button>
        </div>

        <script type="text/javascript">
            let normal = document.getElementById('normal');
            let bt = document.getElementById('bt');
            normal.addEventListener('click',function(){
                alert('click normal');   
            })
            bt.addEventListener('click',function(){
                alert('click bt');   
            })
        </script>
    </body>
</html>

第六種：脫離螢幕顯示位置

脫離螢幕顯示位置同樣可以使元素不可見，但是達到這種效果的css樣式太多了，這裡只舉例一種情況說明。

程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>脫離螢幕顯示位置</title>
        <style type="text/css">
            div {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                position: fixed;
                top: -100px;
                left: -100px;
            }
        </style>
    </head>
    <body>
        <div>
            <button id="normal">按鈕</button>
        </div>
        <div>
            <button id="bt">按鈕</button>
        </div>

        <script type="text/javascript">
            let normal = document.getElementById('normal');
            let bt = document.getElementById('bt');
            normal.addEventListener('click',function(){
                alert('click normal');   
            })
            bt.addEventListener('click',function(){
                alert('click bt');   
            })
        </script>
    </body>
</html>

第七種：遮蓋

使用元素遮蓋也可以使元素不可見，因為達到這種效果的css樣式也很多，故這裡只舉例一種情況說明。

程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>遮蓋</title>
        <style type="text/css">
            div {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                z-index: -1;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
            #cover {
                z-index: 1;
                position: absolute;
                top: 0;
                left: 0;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div>
            <button id="normal">按鈕</button>
        </div>
        <div style="position: relative;line-height: normal;">
            <button id="bt">按鈕</button>
            <div id="cover"></div>
        </div>

        <script type="text/javascript">
            let normal = document.getElementById('normal');
            let bt = document.getElementById('bt');
            normal.addEventListener('click',function(){
                alert('click normal');   
            })
            bt.addEventListener('click',function(){
                alert('click bt');   
            })
        </script>
    </body>
</html>

結尾

本人才疏學淺，出現錯誤之處，還望指出。

參考

CSS隱藏元素方法
2018-05-25
CSS
隱藏元素兩種方式
2024-03-28
使用CSS隱藏元素滾動條
2020-10-28
CSS
【CSS】CSS 世界 — 元素的顯示與隱藏學習總結
2018-11-20
CSS
CSS 小結筆記之元素的隱藏與顯示
2018-09-10
CSS筆記
css li元素中的文字超出隱藏不換行效果
2018-03-05
CSS
元素的隱藏和顯示(display ,visibility ,overflow)
2020-11-19
隱藏IP地址的三種方法
2022-06-06
jQuery幾種隱藏span的方法
2021-09-09
jQuery
jQuery隱藏一個div元素
2018-07-14
jQuery
jQuery 判斷元素是否隱藏
2023-12-25
jQuery
有趣的css
2018-04-17
CSS
css隱藏滾動條
2019-11-15
CSS
JavaScript動畫方式控制div元素的隱藏和顯示
2018-03-14
JavaScript動畫
教你三種jQuery框架實現元素顯示及隱藏動畫方式
2021-09-11
jQuery框架動畫
absolute定位css元素居中的兩種方法
2020-11-27
CSS
一種巧妙的使用 CSS 製作波浪效果的思路
2021-05-18
CSS
CSS——文字超出隱藏顯示省略號
2020-06-25
CSS
動態控制C4C UI元素的顯示和隱藏
2018-05-06
UI
Vue控制子元件的顯示隱藏的四種辦法
2018-10-23
Vue元件
# Flutter控制元件的顯示和隱藏的三種方式
2022-09-27
Flutter控制元件
隱藏資料夾怎麼取消隱藏關閉隱藏檔案的辦法
2021-11-03
萬彩動畫大師教程 | 隱藏元素物件
2019-01-15
動畫物件
定位是什麼，元素怎麼顯示隱藏
2022-03-12
3種方法實現CSS隱藏滾動條並可以滾動內容
2018-03-17
CSS
Elementor如何隱藏頁面上的標題（2種辦法）
2020-08-26
iis7/8隱藏banner資訊
2024-08-18
SAP UI5 FileUploader 使用的隱藏 iframe 和 form 元素的設計明細
2022-07-30
UIORM
CSS點選隱藏和顯示div效果
2018-11-23
CSS
css超出部分隱藏,js倒數計時
2018-04-23
CSSJS
css隱藏滾動條並可以滾動
2020-12-25
CSS
OSX中隱藏和顯示[隱藏檔案]的命令列
2018-10-20
命令列
隱藏你的 ID 吧！
2018-10-16
win10怎麼雙擊隱藏桌面圖示 Win10隱藏桌面圖示的三種方法
2022-04-09
Win10
有趣的CSS彈跳動畫
2019-05-06
CSS動畫
CSS3實現側邊欄快速定位的隱藏和消失
2018-12-10
CSSS3
HTML圖片鋪滿div元素不變形，超出部分隱藏，保留中心部分css程式碼
2024-07-02
HTMLCSS
隱藏列表的另一種方式，Excel表格怎麼建立組？
2022-04-07
Excel

有趣的css—隱藏元素的7種思路

css隱藏元素的7種思路

前言

第一種：移除出可訪問性樹

display : none

第二種：隱藏元素

visibility: hidden

第三種：透明

opacity: 0

transparent

rgba(0,0,0,0)

hsla(0,0%,0%,0)

filter: opacity(0%)

第四種：縮放

transform: scale(0, 0)

width: 0;height: 0;overflow: hidden

第五種：旋轉

transform: rotateX(90deg)

transform: rotateY(90deg)

第六種：脫離螢幕顯示位置

第七種：遮蓋

結尾

參考

相關文章