Bagaimana untuk menunjukkan dan menyembunyikan elemen dalam css

CSS ialah bahasa yang digunakan untuk reka bentuk web Ia boleh meningkatkan kebolehbacaan dan interaktiviti halaman web, dan juga menjadikan persembahan elemen web lebih kaya. Antaranya, fungsi paparan dan penyembunyian CSS adalah keperluan biasa dalam proses reka bentuk web. Artikel ini akan memperkenalkan secara terperinci cara memaparkan dan menyembunyikan elemen dalam CSS.

1. Gunakan atribut paparan

Atribut paparan CSS boleh mengawal mod paparan elemen termasuk blok, tiada, sebaris, blok sebaris, dll. Antaranya, nilai atribut tiada boleh menyembunyikan elemen Di bawah nilai atribut ini, elemen tidak akan dipaparkan pada halaman web.

Sebagai contoh, kod berikut boleh memaparkan dan menyembunyikan perenggan dengan mengklik butang:

Kod HTML:

<button onclick="hide()">隐藏段落</button>
<p id="hide-me">这是一段话。</p>

Kod CSS:

#hide-me {
  display: block;
}

Kod JavaScript:

function hide() {
    var para = document.getElementById("hide-me");
    para.style.display = "none";
}

Dalam kod di atas, apabila butang diklik, kod JavaScript akan memperoleh elemen perenggan dengan ID "hide-me", dan kemudian mengubah suai atribut paparannya untuk mencapai kesan menyembunyikan unsur.

2. Gunakan atribut keterlihatan

Atribut keterlihatan CSS boleh mengawal keterlihatan elemen pada halaman Nilai atribut biasa kelihatan, tersembunyi dan runtuh. Antaranya, nilai atribut tersembunyi boleh menyembunyikan elemen Di bawah nilai atribut ini, elemen itu masih akan menduduki ruang pada halaman web.

Sebagai contoh, kod berikut boleh memaparkan dan menyembunyikan perenggan dengan mengklik butang:

Kod HTML:

<button onclick="hide()">隐藏段落</button>
<p id="hide-me">这是一段话。</p>

Kod CSS:

#hide-me {
  visibility: visible;
}

Kod JavaScript:

function hide() {
    var para = document.getElementById("hide-me");
    para.style.visibility = "hidden";
}

Dalam kod di atas, apabila butang diklik, kod JavaScript akan mendapat elemen perenggan dengan ID "hide-me", dan kemudian mengubah suai atribut keterlihatannya untuk mencapai kesan menyembunyikan unsur.

3. Gunakan atribut kelegapan

Atribut kelegapan CSS boleh mengawal ketelusan elemen Nilai atribut biasa ialah nombor dari 0 hingga 1, yang menunjukkan kelegapan elemen. Antaranya, 0 bermaksud telus sepenuhnya dan 1 bermaksud legap. Dengan menetapkan atribut kelegapan elemen kepada 0, kita juga boleh menyembunyikan elemen tersebut.

Sebagai contoh, kod berikut boleh memaparkan dan menyembunyikan perenggan dengan mengklik butang:

Kod HTML:

<button onclick="hide()">隐藏段落</button>
<p id="hide-me">这是一段话。</p>

Kod CSS:

#hide-me {
  opacity: 1;
}

Kod JavaScript:

function hide() {
    var para = document.getElementById("hide-me");
    para.style.opacity = "0";
}

Dalam kod di atas, apabila butang diklik, kod JavaScript akan mendapat elemen perenggan dengan ID "hide-me", dan kemudian mengubah suai atribut kelegapannya untuk mencapai kesan menyembunyikan unsur.

4. Gunakan atribut z-index

Dalam sesetengah kes, kita perlu menggunakan susunan susun untuk mengawal penyembunyian dan paparan elemen. Atribut z-index CSS boleh mengawal susunan susunan elemen pada halaman dengan menetapkan tahap elemen, dan kemudian dengan melaraskan nilai atribut z-index bagi elemen yang berbeza, kesan penyembunyian dan paparan boleh dicapai.

Sebagai contoh, kod berikut boleh memaparkan dan menyembunyikan perenggan dengan mengklik butang:

Kod HTML:

<button onclick="hide()">隐藏段落</button>
<p id="hide-me" style="position: absolute; top: 50px; left: 50px; z-index: 1;">这是一段话。</p>

Kod CSS:

JavaScript kod:

function hide() {
    var para = document.getElementById("hide-me");
    para.style.zIndex = "-1";
}

Dalam kod di atas, apabila butang diklik, kod JavaScript akan mendapat elemen perenggan dengan ID "hide-me", dan kemudian mengubah suai atribut z-indexnya untuk mencapai kesan menyembunyikan unsur.

Ringkasan

Fungsi paparan dan sembunyikan dalam CSS sangat biasa digunakan dan ia boleh membantu kami mengawal paparan dan penyembunyian pelbagai elemen dalam halaman web. Dengan menggunakan ciri paparan, keterlihatan, kelegapan dan indeks z, kami boleh mencapai kesan yang diingini dengan mudah dan menjadikan reka bentuk web lebih fleksibel dan pelbagai.

Atas ialah kandungan terperinci Bagaimana untuk menunjukkan dan menyembunyikan elemen dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!