Bagaimana untuk membuat persembahan div dan bersembunyi dengan javascript

Dengan pembangunan berterusan teknologi Internet, JavaScript telah menjadi salah satu kemahiran penting untuk pembangunan laman web moden. Salah satu fungsi yang biasa digunakan ialah untuk memaparkan dan menyembunyikan elemen div, yang sangat penting dalam reka bentuk dan interaksi laman web. Artikel ini akan menerangkan secara terperinci cara menggunakan JavaScript untuk memaparkan dan menyembunyikan elemen div.

1. Struktur asas HTML

Sebelum mula menulis kod JavaScript, kita perlu menulis struktur asas HTML terlebih dahulu. Dalam contoh ini, kami mencipta butang dan elemen div:

<button onclick="toggle()">点击显示/隐藏</button>

<div id="myDiv">这是一个隐藏的区域。</div>

Antaranya, butang memanggil fungsi toggle() dan elemen div mengandungi atribut id "myDiv". operasi Keperluan untuk elemen ini.

2. Gunakan JavaScript untuk memaparkan dan menyembunyikan elemen div

1. Gunakan atribut style.display

Pertama, kita boleh menggunakan Style.display Properties JavaScript untuk mengawal paparan dan penyembunyian elemen. Atribut ini menerima tiga parameter: "blok" digunakan untuk memaparkan elemen, "tiada" digunakan untuk menyembunyikan elemen dan "blok sebaris" digunakan untuk memaparkan elemen blok sebaris.

Kita boleh menggunakannya dengan element.style.display, sebagai contoh:

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

Dalam skrip ini, mula-mula kita mendapatkan elemen div melalui kaedah getElementById() dan kemudian semak sama ada harta style.display ialah "tiada". Jika ya, tukar nilainya kepada "sekat" untuk menunjukkan elemen, jika tidak tukar nilainya kepada "tiada" untuk menyembunyikan elemen.

2. Gunakan atribut className

Menggunakan kaedah yang berbeza daripada style.display, anda juga boleh menggunakan atribut className JavaScript untuk menogol paparan dan menyembunyikan elemen div. Kaedah ini dilaksanakan menggunakan CSS untuk menentukan gaya.

Sebagai contoh, kita boleh mentakrifkan dua kelas: ".show" dan ".hide". ".show" digunakan untuk menunjukkan elemen div, dan ".hide" digunakan untuk menyembunyikan elemen div. Kami juga perlu menentukan nama kelas lalai untuk elemen:

<style>
.hide { visibility: hidden; }
.show { visibility: visible !important; }
</style>

<div id="myDiv" class="hide">这是一个隐藏的区域。</div>

Memandangkan gaya CSS hanyalah rentetan, anda boleh menggunakan atribut className JavaScript untuk mengubah suai kelas elemen:

<script>
function toggle()
{
    var div = document.getElementById("myDiv");
    if (div.className === "hide") {
        div.className = "show";
    } else {
        div.className = "hide";
    }
}
</script>

Skrip ini Apabila menukar kelas elemen div, simbol "!" ditambah sebelum kelas "tunjukkan" untuk memastikan gaya "keterlihatan" dipaksa untuk ditunjukkan, yang boleh mengatasi gaya kelas "sembunyikan" untuk membuat elemen div kelihatan.

3. Kesimpulan

Di atas ialah dua kaedah menggunakan JavaScript untuk memaparkan dan menyembunyikan elemen div. Walaupun mereka menggunakan sifat dan kaedah yang berbeza, semuanya dengan mudah mencapai tujuan yang sama: menogol keterlihatan elemen div. Dalam projek sebenar, anda boleh memilih kaedah dan sifat yang paling sesuai dengan anda berdasarkan fungsi khusus yang anda perlukan.

Atas ialah kandungan terperinci Bagaimana untuk membuat persembahan div dan bersembunyi dengan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!