Bagaimanakah Saya Boleh Menyembunyikan Teks Tidak Bertanda dalam HTML Menggunakan CSS atau JavaScript?

Menyembunyikan Teks Tidak Bertanda dalam HTML

Anda mungkin menghadapi situasi di mana anda mempunyai kod HTML dengan teks yang tidak mempunyai sebarang teg HTML di sekeliling. Menyembunyikan teks ini boleh menjadi mencabar, terutamanya jika tidak boleh membungkus teks dengan div atau teg lain. Mari kita atasi isu ini menggunakan teknik CSS dan JavaScript.

Css Hack

Satu penyelesaian ialah menggunakan penggodaman CSS yang menyasarkan saiz fon keseluruhan elemen tertentu:

.entry {
  font-size: 0;
}

.entry * {
  font-size: initial;
}

Dalam kod ini, elemen .entry diberikan saiz fon 0, dengan berkesan menyembunyikan semua teks di dalamnya. Walau bagaimanapun, ini boleh menjadi tidak diingini dalam situasi di mana anda mahu elemen lain dalam .entry mengekalkan saiz fon asalnya. Untuk menyembunyikan teks tertentu secara terpilih, anda boleh menambah pemilih bersarang:

.entry .hidden-text {
  font-size: 0;
}

Pendekatan ini menyasarkan dan menyembunyikan hanya elemen dengan kelas .hidden-text.

JavaScript

Sebagai alternatif, anda boleh menggunakan JavaScript untuk memanipulasi DOM secara dinamik dan mencapai hasil yang diingini. Sebagai contoh, anda boleh menggunakan kod JavaScript berikut:

document.querySelector("div.entry p:nth-child(2)").style.display = "none";

Dalam kod ini, kami memilih perenggan kedua (p:nth-child(2)) dalam div .entry dan tetapkan sifat paparannya kepada "tiada," menyembunyikannya dengan berkesan.

Pilihan antara CSS dan JavaScript bergantung pada keperluan khusus situasi anda. Jika penting untuk menyembunyikan teks secara selektif, maka CSS mungkin merupakan pilihan yang lebih baik. Sebaliknya, jika anda perlu menyembunyikan teks secara dinamik berdasarkan syarat atau interaksi pengguna tertentu, maka JavaScript adalah lebih sesuai.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyembunyikan Teks Tidak Bertanda dalam HTML Menggunakan CSS atau JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!