div css tunjukkan hide div-Soal Jawab bahagian hadapan-php.cn

div css tunjukkan hide div

王林

Lepaskan： 2023-05-27 11:03:07

asal

1058 orang telah melayarinya

Petua CSS: Paparkan dan sembunyikan DIV melalui atribut paparan

Sebagai salah satu elemen yang biasa digunakan dalam halaman, DIV digunakan secara meluas dalam reka letak, pemformatan dan pembahagian kandungan. Dalam pembangunan sebenar, kadangkala kita perlu mengawal paparan dan penyembunyian elemen DIV melalui kod Dalam kes ini, atribut paparan CSS boleh digunakan.

Peranan atribut paparan

Atribut paparan ialah atribut asas dalam CSS yang digunakan untuk mengawal sama ada elemen dipaparkan. Ia boleh ditetapkan kepada pelbagai nilai untuk mencapai paparan yang berbeza dan kesan penyembunyian. Khususnya, nilai atribut paparan adalah seperti berikut:

tiada: Menyembunyikan elemen adalah bersamaan dengan mengalih keluar sepenuhnya ruang elemen pada halaman. Elemen tidak menduduki sebarang ruang dan tidak diberikan.
blok: Paparkan elemen sebagai elemen peringkat blok, iaitu elemen akan menduduki baris eksklusif dan secara automatik membalut sebelum dan selepas label. Anda boleh menetapkan gaya seperti lebar, tinggi, jidar dan padding.
sebaris: Paparkan elemen sebagai elemen sebaris, iaitu elemen tidak akan menduduki baris eksklusif dan akan membalut secara automatik pada penghujungnya. Gaya seperti lebar, tinggi, jidar dan padding tidak boleh ditetapkan.
sebaris-blok: Paparkan elemen sebagai elemen blok sebaris, yang mempunyai ciri-ciri elemen peringkat blok Anda juga boleh menetapkan berbilang elemen sebaris untuk dipaparkan pada baris yang sama.
jadual, baris jadual, sel jadual, dsb.: Paparkan elemen sebagai jadual dan elemen selnya.

Menyedari paparan dan penyembunyian DIV

Seterusnya, kami akan menggunakan beberapa contoh untuk menunjukkan cara menggunakan atribut paparan untuk memaparkan dan menyembunyikan DIV.

Klik butang untuk memaparkan dan menyembunyikan DIV

Dalam contoh ini, kami menggunakan butang untuk mengawal paparan dan menyembunyikan DIV.

Bahagian HTML:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS显示和隐藏DIV</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
<body>
    <button onclick="toggle()">点击显示/隐藏DIV</button>
    <div id="myDiv" style="display:none;">这是一个DIV元素</div>
    <script src="js/main.js"></script>
</body>
</html>

Salin selepas log masuk

Bahagian CSS:

#myDiv {
    width: 200px;
    height: 200px;
    background-color: #ccc;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Salin selepas log masuk

Bahagian JavaScript:

function toggle() {
    var div = document.getElementById("myDiv");
    if (div.style.display === "none") {
        div.style.display = "block";
    } else {
        div.style.display = "none";
    }
}

Salin selepas log masuk

Dalam contoh ini, kami menambah dalam elemen butang HTML Satu onclick acara dan mentakrifkan fungsi togol. Fungsi ini akan memperoleh elemen DIV yang perlu kita kawal melalui kaedah getElementById, dan kemudian merealisasikan paparan dan kesan sembunyikan dengan menilai nilai atribut paparan elemen tersebut.

Apabila kita mengklik butang, fungsi togol akan menentukan sama ada nilai atribut paparan elemen DIV semasa adalah tiada, ia akan ditetapkan untuk menyekat, iaitu, jika tidak, ia akan ditetapkan kepada tiada , iaitu tersembunyi.

Gunakan pemilih :hover untuk memaparkan dan menyembunyikan DIV

Dalam contoh ini, kami mengawal paparan dan menyembunyikan DIV dengan menuding tetikus di atas elemen.

Bahagian HTML:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS显示和隐藏DIV</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
<body>
    <div id="myDiv">
        <p>鼠标悬停在这里，显示下面的DIV元素</p>
        <div id="myPopup">这是一个DIV元素</div>
    </div>
</body>
</html>

Salin selepas log masuk

Bahagian CSS:

#myDiv {
    width: 200px;
    height: 80px;
    background-color: #eee;
    position: relative;
}
#myPopup {
    width: 100px;
    height: 100px;
    background-color: #ddd;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
}
#myDiv:hover #myPopup {
    display: block;
}

Salin selepas log masuk

Dalam contoh ini, kami menggunakan: pemilih tuding untuk memaparkan dan menyembunyikan elemen DIV. Apabila tetikus melayang di atas elemen myDiv, elemen myPopup akan dipaparkan apabila tetikus meninggalkan elemen myDiv, elemen myPopup akan disembunyikan. Pada masa ini, kami hanya perlu menetapkan nilai atribut paparan elemen myPopup kepada tiada atau blok.

Gunakan animasi peralihan CSS3 untuk memaparkan dan menyembunyikan DIV

Dalam contoh ini, untuk menjadikan paparan dan penyembunyian elemen DIV lebih lancar dan lebih semula jadi, kami menggunakan Ini dicapai menggunakan kesan animasi peralihan CSS3.

Bahagian HTML:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS显示和隐藏DIV</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
<body>
    <button onclick="toggle()">点击显示/隐藏DIV</button>
    <div id="myDiv">这是一个DIV元素</div>
    <script src="js/main.js"></script>
</body>
</html>

Salin selepas log masuk

Bahagian CSS:

#myDiv {
    width: 200px;
    height: 200px;
    background-color: #ccc;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all .3s ease-in-out;
}

Salin selepas log masuk

Bahagian JavaScript:

function toggle() {
    var div = document.getElementById("myDiv");
    if (div.style.opacity === "0") {
        div.style.display = "block";
        div.style.opacity = "1";
    } else {
        div.style.opacity = "0";
        setTimeout(function() {div.style.display = "none";}, 300);
    }
}

Salin selepas log masuk

Dalam contoh ini, kami mentakrifkan elemen myDiv dalam CSS An semua . Kesan peralihan mudah-masuk-keluar 3s, supaya apabila kita mengubah suai nilai atribut paparan atau nilai atribut kelegapan elemen myDiv, peralihan yang lancar akan dibuat mengikut kesan ini.

Dalam JavaScript, kami menggunakan fungsi setTimeout untuk menangguhkan pelaksanaan blok kod untuk menunggu selesainya kesan peralihan. Apabila kita mengklik butang, fungsi togol akan menentukan sama ada nilai atribut kelegapan unsur DIV semasa ialah 0. Jika ya, ia akan ditetapkan kepada 1 dan nilai atribut paparan akan ditetapkan untuk menyekat, iaitu, dipaparkan; jika tidak, ia akan dipaparkan kepada 0, kemudian tunggu peralihan selesai, dan akhirnya tetapkan nilai atribut paparannya kepada tiada, iaitu, sembunyikannya.

Ringkasan

Melalui tiga contoh di atas, kita dapat melihat bahawa atribut paparan CSS dengan mudah dapat merealisasikan paparan dan kesan penyembunyian elemen DIV, dan dalam proses pelaksanaan, JavaScript dan Dengan bantuan CSS3, kesannya lebih kaya dan lebih semula jadi. Saya harap artikel ini dapat membantu semua orang menguasai atribut paparan CSS!

Atas ialah kandungan terperinci div css tunjukkan hide div. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!