Rumah > Artikel > hujung hadapan web > Bagaimana untuk mengawal paparan badan dan bersembunyi dengan javascript
Bagaimana untuk mengawal paparan badan dan bersembunyi dengan javascript
- PHPzasal
- 2023-04-24 15:48:491373semak imbas
Dalam pembangunan bahagian hadapan, JavaScript merupakan bahagian yang sangat diperlukan, dan mengawal paparan serta penyembunyian elemen halaman adalah keperluan yang sangat biasa. Untuk mengawal paparan dan penyembunyian keseluruhan halaman, anda perlu mengawal paparan dan penyembunyian elemen badan. Artikel ini akan memperkenalkan cara menggunakan javascript untuk mengawal paparan dan penyembunyian elemen badan.
- Dapatkan elemen badan
Pertama, kita perlu dapatkan elemen badan. Dalam javascript, ia boleh diperolehi melalui document.body. Contohnya:
var body = document.body;
- Kawal paparan dan penyembunyian elemen badan
Seterusnya, kita perlu mengawal paparan dan penyembunyian elemen badan. Ini boleh dicapai dengan mengubah suai atribut paparan dalam atribut gaya elemen badan. Jika atribut paparan ditetapkan kepada "tiada", elemen badan akan disembunyikan jika atribut paparan ditetapkan kepada "sekat", elemen badan akan dipaparkan. Contohnya:
// 隐藏body元素 body.style.display = "none"; // 显示body元素 body.style.display = "block";
- Helaian gaya kawalan
Walau bagaimanapun, dalam pembangunan sebenar, kami jarang mengendalikan atribut gaya elemen secara langsung. Sebaliknya, helaian gaya digunakan untuk mengawal gaya elemen halaman. Oleh itu, mengawal paparan dan penyembunyian elemen badan juga boleh dicapai dengan mengendalikan helaian gaya.
Dalam teg kepala halaman HTML, anda boleh menambah helaian gaya berikut:
<style>
body.hidden {
display: none;
}
</style>
Helaian gaya ini mentakrifkan kelas bernama "tersembunyi", di mana elemen badan ialah The atribut paparan ditetapkan kepada "tiada", yang bermaksud elemen badan boleh disembunyikan.
Kini, kita boleh mengawal elemen badan untuk menambah atau mengalih keluar kelas "tersembunyi" melalui javascript. Contohnya:
// 隐藏body元素
body.classList.add("hidden");
// 显示body元素
body.classList.remove("hidden");
- Contoh Aplikasi
Akhir sekali, mari kita lihat contoh permohonan yang lengkap. Katakan kita mempunyai halaman dengan butang di atasnya. Mengklik butang boleh mengawal paparan dan menyembunyikan halaman. Kita boleh melaksanakannya dengan mengikut langkah berikut:
- Tambah helaian gaya pada teg kepala, tentukan kelas bernama "tersembunyi", dan tetapkan atribut paparan elemen badan kepada "tiada".
<head>
<style>
body.hidden {
display: none;
}
</style>
</head>
- Tambahkan butang pada halaman dan tambahkan acara klik.
<body> <button onclick="toggle()">显示/隐藏</button> <!-- 页面内容 --> </body>
- Tentukan fungsi togol dalam JavaScript, yang mengawal paparan dan penyembunyian elemen badan dengan mengendalikan helaian gaya.
function toggle() {
var body = document.body;
body.classList.toggle("hidden");
}
Kini, apabila pengguna mengklik butang, fungsi togol akan dicetuskan, yang mengawal paparan dan penyembunyian elemen badan dengan mengendalikan helaian gaya.
Ringkasan
Melalui contoh di atas, kita dapat melihat bahawa dalam javascript, mengawal paparan dan penyembunyian elemen badan boleh dicapai dengan mengendalikan secara langsung atribut gaya elemen, atau dengan mengendalikan helaian gaya. Untuk keperluan yang memerlukan kawalan gaya halaman yang lebih fleksibel, adalah disyorkan untuk menggunakan helaian gaya untuk mengawal gaya elemen.
Atas ialah kandungan terperinci Bagaimana untuk mengawal paparan badan dan bersembunyi dengan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!