ホームページ  >  記事  >  ウェブフロントエンド  >  CSS3で要素の非表示を制御する方法は何ですか

CSS3で要素の非表示を制御する方法は何ですか

青灯夜游
青灯夜游オリジナル
2022-01-13 13:49:061575ブラウズ

制御方法: 1. "display:none" ステートメントを使用してアクセシビリティ ツリーから要素を削除し、それによって要素を非表示にします; 2. "visibility: hidden" ステートメントを使用して要素を非表示に設定します; 3.「opacity: 0」ステートメントを使用して要素を透明に設定します; 4.要素を画面表示位置から遠ざけるなどします。

CSS3で要素の非表示を制御する方法は何ですか

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css3 が要素の非表示を制御する方法

最初の方法: アクセシビリティ ツリーを削除します

表示: none

display 属性は、要素の内部および外部の表示タイプを設定できます。表示を none に設定すると、アクセシビリティ ツリーから要素が削除されます。

コード:

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>display : none</title>
        <style type="text/css">
            p {
                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>
        <p>
            <button id="normal">按钮</button>
        </p>
        <p>
            <button id="bt">按钮</button>
        </p>

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

2 番目のタイプ: 非表示要素

visibility: hidden

可視性設定の変更hidden にすると要素は非表示になりますが、この時点では要素はまだアクセシビリティ ツリー内にあります (要素は表示時にアクセシビリティ ツリーの外に移動します: none) ため、クリック イベントの登録は無効になります。

コード:

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>visibility: hidden</title>
        <style type="text/css">
            p {
                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>
        <p>
            <button id="normal">按钮</button>
        </p>
        <p>
            <button id="bt">按钮</button>
        </p>

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

3 番目のタイプ: 透明

不透明度: 0

不透明度(透明度なし) )、値の範囲は 0 (完全に透明) ~ 1 (完全に不透明) です。不透明度を 0 に設定すると、要素は完全に透明になります。この時点では、要素は (透明であるため) 表示されず、まだアクセシビリティの範囲内にあります。クリックイベントの登録は有効です。

コード:

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>opacity: 0</title>
        <style type="text/css">
            p {
                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>
        <p>
            <button id="normal">按钮</button>
        </p>
        <p>
            <button id="bt">按钮</button>
        </p>

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

transparent

要素の背景色、色、境界線の色を透明(透明)に設定します。この時点では、要素が非表示 (透明であるため) のまま、アクセシビリティ ツリー内にあり、クリック イベントの登録は有効です。

コード:

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>transparent</title>
        <style type="text/css">
            p {
                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>
        <p>
            <button id="normal">按钮</button>
        </p>
        <p>
            <button id="bt">按钮</button>
        </p>

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

rgba(0,0,0,0)

技術的に言えば、透明は rgba(0,0, 0, 0)、要素の背景色、色、境界線の色を 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">
            p {
                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>
        <p>
            <button id="normal">按钮</button>
        </p>
        <p>
            <button id="bt">按钮</button>
        </p>

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

rgba で要素を非表示にする効果を得るには、4 番目のパラメーターを 0 にするだけで済みます。

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

hsla は rgba と同じ要素非表示メカニズムを使用します。どちらも 4 番目のパラメーター Alpha によって制御されます。要素の背景色、色、境界線の色を 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">
            p {
                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>
        <p>
            <button id="normal">按钮</button>
        </p>
        <p>
            <button id="bt">按钮</button>
        </p>

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

hsla は rgba と同じですが、要素を非表示にする効果を得るために 4 番目のパラメーターのみが 0 です。

filter: opacity(0%)

filter (フィルター) 不透明度 (0% ~ 100%) は、画像の透明度、値の範囲を変換します。 0% (完全に透明) ~ 100% (完全に不透明) の間です。要素のフィルターを不透明度(0%)に設定します。このとき、要素は透明なので非表示であり、アクセシビリティツリーに残っています。クリックイベントを登録すると効果的です。

コード:

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>filter: opacity(0%)</title>
        <style type="text/css">
            p {
                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>
        <p>
            <button id="normal">按钮</button>
        </p>
        <p>
            <button id="bt">按钮</button>
        </p>

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

4 番目: スケーリング

transform:scale(0, 0)

変換を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">
            p {
                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>
        <p>
            <button id="normal">按钮</button>
        </p>
        <p>
            <button id="bt">按钮</button>
        </p>

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

width: 0;height: 0;overflow: hidden

要素が占めるように幅と高さの両方を 0 に設定します。ピクセル比率は 0*0 ですが、この時点で次の 2 つの状況が発生します。

  • 要素の表示属性がインラインの場合、要素のコンテンツは、要素の幅と高さを引き伸ばします。 element;

  • 要素の表示属性が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">
            p {
                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>
        <p>
            <button id="normal">按钮</button>
        </p>
        <p>
            <button id="bt">按钮</button>
        </p>

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

5 番目のタイプ: オフスクリーン表示位置

オフスクリーン表示位置によって要素が非表示になることもありますが、これを実現するにはこれはエフェクトの CSS スタイルが多すぎるため、ここではほんの 1 つの例を示します。

コード:

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>脱离屏幕显示位置</title>
        <style type="text/css">
            p {
                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>
        <p>
            <button id="normal">按钮</button>
        </p>
        <p>
            <button id="bt">按钮</button>
        </p>

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

(学習ビデオ共有: css ビデオ チュートリアル)

以上がCSS3で要素の非表示を制御する方法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。