kandungan html tersembunyi

Menyembunyikan kandungan HTML: Atribut paparan CSS dan atribut classList JavaScript

Kandungan yang bersembunyi dalam HTML boleh dicapai melalui pelbagai teknik, termasuk menggunakan atribut paparan CSS, atribut keterlihatan dan atribut kelegapan, dan Gunakan atribut dan gaya classList JavaScript atribut, dsb. Dalam artikel ini, kami akan memperkenalkan cara menggunakan atribut paparan CSS dan atribut classList JavaScript untuk menyembunyikan kandungan HTML.

1. Gunakan atribut paparan CSS untuk menyembunyikan kandungan HTML

Atribut paparan CSS boleh mengawal cara elemen dipaparkan pada halaman. Nilai atribut paparan yang biasa digunakan termasuk blok, sebaris, blok sebaris, jadual, tiada, dsb. Antaranya, nilai tiada bermakna elemen itu dikeluarkan sepenuhnya dari halaman, iaitu, ia tidak menempati ruang pada halaman.

Berikut ialah contoh menggunakan atribut paparan CSS untuk menyembunyikan kandungan:

<div id="myDiv">这是一个要隐藏的文本。</div>

Balut teks untuk disembunyikan dalam elemen div dan tetapkan atribut CSS untuk elemen div ini:

#myDiv {
    display: none;
}

Dengan cara ini, teks akan disembunyikan dan tidak lagi dipaparkan pada halaman.

Perlu diambil perhatian bahawa apabila menggunakan atribut display:none untuk menyembunyikan elemen HTML, elemen tersebut akan dialih keluar sepenuhnya dan tidak akan menduduki ruang pada halaman. Jika anda perlu menyembunyikan elemen tetapi masih menggunakan ruang, anda boleh menggunakan atribut visibility:hidden atau atribut opacity:0.

2. Gunakan atribut classList JavaScript untuk menyembunyikan kandungan HTML

JavaScript boleh menyembunyikan elemen HTML melalui operasi DOM. Antaranya, atribut classList boleh digunakan untuk mendapatkan atau mengubah suai atribut kelas elemen. Atribut kelas ialah rentetan yang mengandungi satu atau lebih nama kelas yang dipisahkan oleh ruang. Gunakan atribut classList untuk menambah, memadam dan menukar nama kelas untuk elemen dengan mudah.

Berikut ialah contoh menggunakan atribut classList JavaScript untuk menyembunyikan kandungan HTML:

<div id="myDiv">这是一个要隐藏的文本。</div>

Balut teks untuk disembunyikan dalam elemen div dan tambahkan nama kelas CSS baharu yang disembunyikan pada elemen div ini :

#myDiv {
    display: block;
}
.hidden {
    display: none;
}

var myDiv = document.getElementById("myDiv");
myDiv.classList.add("hidden");

Dengan cara ini, teks akan disembunyikan dan tidak lagi dipaparkan pada halaman. Apabila anda perlu memaparkan teks sekali lagi, anda hanya perlu mengubah suai nama kelas CSS elemen kepada nama kelas yang tidak termasuk tersembunyi, seperti yang ditunjukkan di bawah:

myDiv.classList.remove("hidden");

Dengan cara ini, atribut paparan elemen nilai akan ditetapkan semula kepada Nilai lalai (atau sekat jika tidak ditetapkan sebelum ini).

3. Kesimpulan

Menyembunyikan kandungan HTML ialah teknologi yang biasa digunakan dalam pembangunan web. Artikel ini memperkenalkan penggunaan atribut paparan CSS dan atribut classList JavaScript untuk menyembunyikan kandungan HTML. Atribut paparan CSS boleh menyembunyikan elemen dengan mudah, tetapi perlu diperhatikan bahawa elemen tersembunyi akan dialih keluar sepenuhnya manakala atribut classList JavaScript boleh menyembunyikan dan memaparkan elemen secara dinamik, yang lebih fleksibel. Dalam aplikasi praktikal, teknologi yang berbeza boleh dipilih mengikut situasi sebenar.

Atas ialah kandungan terperinci kandungan html tersembunyi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!