Bagaimana untuk mengawal paparan badan dan bersembunyi dengan javascript-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk mengawal paparan badan dan bersembunyi dengan javascript

PHPz

Lepaskan： 2023-04-24 17:00:56

asal

1434 orang telah melayarinya

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;

Salin selepas log masuk

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";

Salin selepas log masuk

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>

Salin selepas log masuk

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");

Salin selepas log masuk

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>

Salin selepas log masuk

Tambahkan butang pada halaman dan tambahkan acara klik.

<body>
    <button onclick="toggle()">显示/隐藏</button>
    <!-- 页面内容 -->
</body>

Salin selepas log masuk

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");
}

Salin selepas log masuk

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!