Apakah cara untuk mengawal penyembunyian elemen dalam css3-Soal Jawab bahagian hadapan-php.cn

Kaedah kawalan: 1. Gunakan pernyataan "display:none" untuk mengalih keluar elemen daripada pepohon kebolehcapaian, dengan itu menyembunyikan elemen 2. Gunakan pernyataan "keterlihatan: tersembunyi" untuk menetapkan elemen menjadi tidak kelihatan ; 3. Gunakan Pernyataan "opacity: 0" menetapkan elemen menjadi lutsinar 4. Biarkan elemen bergerak menjauhi kedudukan paparan skrin, dsb.

Apakah cara untuk mengawal penyembunyian elemen dalam css3

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Cara CSS3 mengawal penyembunyian elemen

Cara pertama: alih keluar pepohon kebolehcapaian

display : none

Atribut paparan boleh menetapkan jenis paparan dalaman dan luaran elemen. Menetapkan paparan kepada tiada akan mengalih keluar elemen daripada pepohon kebolehaksesan.

Kod:

<!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>

Salin selepas log masuk

Kedua: Elemen tersembunyi

visibility: hidden

Tetapkan keterlihatan kepada tersembunyi Jadikan elemen tidak kelihatan , tetapi elemen masih dalam pepohon kebolehaksesan pada masa ini (elemen dialihkan keluar daripada pepohon kebolehaksesan apabila dipaparkan: tiada), dan pendaftaran acara klik adalah tidak sah.

Kod:

<!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>

Salin selepas log masuk

Jenis ketiga: Lutsinar

opacity: 0

kelegapan (kelegapan), ambil Nilai julat adalah 0 (lutsinar sepenuhnya) ~ 1 (legap sepenuhnya). Menetapkan kelegapan kepada 0 akan menjadikan elemen itu telus sepenuhnya peristiwa adalah sah.

Kod:

<!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>

Salin selepas log masuk

transparent

Tetapkan warna latar belakang, warna dan warna sempadan elemen kepada telus (lutsinar), pada masa itu elemen tidak kelihatan (kerana ia telus), masih dalam pepohon kebolehaksesan, pendaftaran acara klik berfungsi.

Kod:

<!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>

Salin selepas log masuk

rgba(0,0,0,0)

Secara teknikal, telus ialah singkatan rgba(0,0,0,0), yang menukar latar belakang elemen -warna, warna dan warna sempadan ditetapkan kepada rgba(0,0,0,0) (telus pada masa ini elemen tidak kelihatan (kerana ia telus) dan masih dalam pepohon kebolehaksesan acara klik adalah sah.

Kod:

<!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>

Salin selepas log masuk

rgba hanya memerlukan parameter keempat menjadi 0 untuk mencapai kesan menyembunyikan elemen.

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

hsla menggunakan mekanisme penyembunyian elemen yang sama seperti rgba, yang dikawal oleh parameter keempat Alpha, yang menetapkan warna latar belakang, warna dan warna sempadan elemen Untuk hsla(0,0%,0%,0), elemen tidak kelihatan pada masa ini (kerana ia telus), ia masih dalam pepohon kebolehaksesan dan mendaftarkan acara klik adalah sah.

Kod:

<!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>

Salin selepas log masuk

hsla adalah sama dengan rgba Hanya parameter keempat ialah 0 untuk mencapai kesan menyembunyikan elemen.

filter: opacity(0%)

penapis (penapis) kelegapan (0% ~ 100%) menukarkan ketelusan imej, julat nilai ialah 0% (telus sepenuhnya) ~ 100% (legap sepenuhnya). Tetapkan penapis elemen kepada kelegapan (0%) Pada masa ini, elemen tidak kelihatan (kerana ia telus) dan masih dalam pepohon kebolehaksesan peristiwa klik adalah berkesan.

Kod:

<!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>

Salin selepas log masuk

Keempat: Skala

transform: scale(0, 0)

Tetapkan transformasi kepada skala(0 , 0) akan menyebabkan elemen diskalakan kepada 0 piksel pada kedua-dua paksi-x dan paksi-y Elemen ini akan dipaparkan dan akan menduduki kedudukan Walau bagaimanapun, kerana ia telah diskalakan kepada 0%, nisbah piksel diduduki oleh elemen dan kandungan ialah 0*0, jadi anda boleh melihat Unsur ini dan kandungannya tidak boleh diklik.

Kod:

<!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>

Salin selepas log masuk

width: 0;height: 0;overflow: hidden

Tetapkan kedua-dua lebar dan tinggi kepada 0, supaya nisbah piksel yang diduduki oleh elemen ialah 0*0, tetapi ini masa ia akan muncul Dua situasi:

Apabila atribut paparan elemen berada dalam baris, kandungan elemen akan meregangkan lebar dan ketinggian elemen
Apabila atribut paparan ialah blok atau blok sebaris, lebar dan ketinggian elemen ialah 0, tetapi kandungan elemen masih dipaparkan secara normal Pada masa ini, menambah limpahan:tersembunyi boleh memangkas kandungan elemen di luar elemen .

Perbezaan antara kaedah ini dan transformasi: skala(0,0) ialah: transform: skala(0,0) menskalakan kedua-dua elemen dan kandungan, manakala kaedah ini menskalakan kedua-duanya elemen dan kandungan Skalakan elemen kepada 0px, dan kemudian pangkas kandungan elemen di luar elemen.

Kod:

<!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>

Salin selepas log masuk

Jenis kelima: kedudukan paparan luar skrin

Kedudukan paparan luar skrin juga boleh menjadikan elemen tidak kelihatan, tetapi ia mencapai Terdapat terlalu banyak gaya CSS untuk kesan ini. Berikut ialah satu contoh.

Kod:

<!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>

Salin selepas log masuk

(Mempelajari perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Apakah cara untuk mengawal penyembunyian elemen dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!