Bagaimana untuk menyembunyikan tag

PHPz

Lepaskan： 2023-04-24 15:36:09

asal

4969 orang telah melayarinya

Teg dalam HTML ialah teg yang digunakan untuk membuat baris jadual, yang boleh meletakkan set data jadual dalam baris yang sama. Walau bagaimanapun, dalam beberapa kes, kami mungkin ingin menyembunyikan teg tertentu, contohnya, apabila kami menambah baris secara dinamik pada halaman melalui JavaScript, kami perlu menyembunyikan baris itu dahulu dan kemudian memaparkannya seperti yang diperlukan. Artikel ini akan memperkenalkan beberapa kaedah untuk menyembunyikan teg

1. Gunakan CSS untuk menyembunyikan teg Ia boleh disembunyikan dengan menetapkan atribut paparan teg Atribut paparan mengawal mod paparan elemen dan mempunyai nilai berikut:

blok: dipaparkan pada baris yang sama

sebaris: dipaparkan pada baris yang sama;
Jadi, jika kita ingin menyembunyikan teg kita hanya perlu menetapkan atribut paparannya kepada tiada. Seperti yang ditunjukkan di bawah:

Selepas menambah baris CSS ini, kita boleh menambah nama kelas, seperti "sembunyikan", pada teg elemen dalam nama Kelas JavaScript untuk menetapkan baris untuk disembunyikan atau ditunjukkan.

tr.hide {
  display: none;
}

Salin selepas log masuk

2. Gunakan JavaScript untuk menyembunyikan teg Menggunakan JavaScript membolehkan kami mengawal paparan dan penyembunyian elemen dengan lebih fleksibel, serta boleh menambah, mengalih dan mengubah suai kandungan baris jadual secara dinamik.

Dengan menetapkan atribut gaya elemen

Baris boleh disembunyikan atau ditunjukkan dengan menetapkan atribut style.display bagi teg di bawah:

Kelebihan kaedah ini ialah ia mudah dan mudah difahami Kelemahannya ialah gaya elemen perlu dimanipulasi secara langsung dalam kod JavaScript diubah suai, kod JavaScript perlu diubah suai.

Kawal paparan dan penyembunyian elemen dengan menambah atau mengalih keluar kelas

// 隐藏
document.getElementById("trId").style.display = "none";

// 显示
document.getElementById("trId").style.display = "table-row";

Salin selepas log masuk

Kami boleh mengawal paparan dan menyembunyikan elemen dengan menambah atau mengalih keluar nama kelas, seperti berikut Ditunjukkan :

Kelebihan kaedah ini ialah anda boleh menggunakan CSS untuk mengurus gaya, menjadikan kod lebih jelas dan lebih mudah untuk diselenggara.

3. Ringkasan

tr.hide {
  display: none;
}

Salin selepas log masuk

// 隐藏
document.getElementById("trId").classList.add("hide");

// 显示
document.getElementById("trId").classList.remove("hide");

Salin selepas log masuk

Melalui dua kaedah di atas, kita boleh mencapai kesan menyembunyikan teg Kaedah menggunakan CSS adalah lebih mudah, tetapi tidak cukup fleksibel; kaedah menggunakan JavaScript boleh mengawal paparan dan penyembunyian elemen dengan lebih fleksibel. Dalam pembangunan sebenar, kita boleh memilih kaedah yang berbeza mengikut keadaan tertentu.

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan tag . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!