Bagaimana untuk menyembunyikan kandungan dalam javascript? Analisis ringkas pelbagai kaedah

Dalam pembangunan web, menyembunyikan kandungan adalah teknik yang sangat biasa Ia boleh menjadikan halaman web lebih ringkas dan cantik, dan ia juga boleh menyembunyikan beberapa maklumat peribadi atau fungsi yang tidak lengkap. Dalam Javascript, terdapat banyak cara untuk menyembunyikan kandungan, dan kami akan memperkenalkannya satu persatu di bawah.

1. atribut paparan

Atribut paparan ialah salah satu atribut yang paling biasa, yang boleh digunakan untuk mengawal keterlihatan unsur. Anda boleh menyembunyikan elemen dengan menetapkan atribut paparannya kepada tiada.

Sebagai contoh, andaikan kita mempunyai elemen div dan ingin menyembunyikannya, kita boleh menggunakan kod berikut:

document.getElementById("myDiv").style.display = "none";

Kod ini akan mencari elemen dengan id myDiv dan menetapkannya atribut paparan Tetapkan kepada tiada untuk disembunyikan.

Apabila anda perlu memaparkan elemen ini sekali lagi, anda boleh menggunakan kod berikut:

document.getElementById("myDiv").style.display = "block";

Kod ini akan menetapkan atribut paparan elemen kepada nilai lalai blok, membenarkannya untuk dipaparkan semula.

2. atribut keterlihatan

Tidak seperti atribut paparan, atribut keterlihatan boleh digunakan untuk mengawal keterlihatan sesuatu elemen. Jika sifat keterlihatan sesuatu elemen ditetapkan kepada tersembunyi, elemen itu tidak akan dipaparkan, tetapi ruang yang didudukinya akan tetap wujud.

Sebagai contoh, jika kita mempunyai elemen p dan ingin menyembunyikannya, kita boleh menggunakan kod berikut:

document.getElementById("myP").style.visibility = "hidden";

Kod ini akan mencari elemen dengan id myP dan menetapkan keterlihatannya atribut kepada tersembunyi, untuk mencapai persembunyian.

Apabila anda perlu memaparkan elemen ini sekali lagi, anda boleh menggunakan kod berikut:

document.getElementById("myP").style.visibility = "visible";

Kod ini akan menetapkan atribut keterlihatan elemen kepada kelihatan, dengan itu menjadikannya dipaparkan semula.

3. atribut kelegapan

Atribut kelegapan boleh digunakan untuk menetapkan ketelusan elemen untuk mencapai kesan penyembunyian. Jika anda menetapkan sifat kelegapan elemen kepada 0, elemen itu tidak kelihatan sepenuhnya;

Sebagai contoh, jika kita mempunyai elemen butang dan mahu ia telus, kita boleh menggunakan kod berikut:

document.getElementById("myBtn").style.opacity = "0";

Kod ini akan mencari elemen dengan id myBtn dan ditetapkan atribut kelegapannya ialah 0 untuk mencapai ketelusan.

Apabila anda perlu memulihkan keadaan kelihatan butang, anda boleh menggunakan kod berikut:

document.getElementById("myBtn").style.opacity = "1";

Kod ini akan menetapkan sifat kelegapan elemen kepada 1, menjadikannya kelihatan semula.

4. atribut kedudukan

Atribut kedudukan boleh digunakan untuk mengawal kedudukan sesuatu elemen. Jika anda menetapkan sifat kedudukan elemen kepada mutlak atau tetap, dan menetapkan sifat kiri dan atasnya kepada nombor negatif, elemen itu akan dialihkan keluar dari kawasan yang boleh dilihat, dengan itu mencapai kesan tersembunyi.

Sebagai contoh, andaikan kita mempunyai elemen div dan ingin mengalihkannya keluar dari kawasan yang boleh dilihat, kita boleh menggunakan kod berikut:

document.getElementById("myDiv").style.position = "absolute";
document.getElementById("myDiv").style.left = "-9999px";
document.getElementById("myDiv").style.top = "-9999px";

Kod ini akan mencari elemen dengan id myDiv dan alihkannya Atribut kedudukan ditetapkan kepada mutlak, dan atribut kiri dan atas ditetapkan kepada nombor negatif untuk mengalihkannya keluar dari kawasan yang boleh dilihat dan mencapai kesan tersembunyi.

Apabila anda perlu memaparkan elemen ini sekali lagi, anda boleh menggunakan kod berikut:

document.getElementById("myDiv").style.position = "static";
document.getElementById("myDiv").style.left = "auto";
document.getElementById("myDiv").style.top = "auto";

Kod ini akan menetapkan atribut kedudukan elemen kepada statik dan menetapkan atribut kiri dan atas kepada nilai lalai mereka untuk menjadikannya kelihatan semula.

Ringkasnya, terdapat banyak cara untuk menyembunyikan kandungan dalam Javascript, dan setiap kaedah mempunyai senario aplikasi yang berbeza. Mengikut keperluan sebenar, kita boleh memilih kaedah yang paling sesuai untuk disembunyikan, dengan itu menjadikan halaman web lebih cantik dan peribadi.

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan kandungan dalam javascript? Analisis ringkas pelbagai kaedah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!