Bagaimanakah Saya Boleh Menyembunyikan dan Menunjukkan Elemen HTML Menggunakan Harta `display` JavaScript?

Sembunyikan dan Tunjukkan Elemen Menggunakan JavaScript

Dalam pembangunan web, mengawal keterlihatan elemen halaman adalah keperluan biasa. Dalam artikel ini, kami meneroka cara menyembunyikan dan menunjukkan elemen dalam JavaScript menggunakan sifat gaya paparan.

Untuk menyembunyikan elemen, kami menetapkan sifat paparannya kepada tiada. Ini mengalih keluar elemen daripada aliran visual halaman, menjadikannya tidak kelihatan kepada pengguna. Untuk menunjukkan elemen tersembunyi, kami hanya menetapkan sifat paparannya kembali kepada nilai yang boleh dilihat, seperti blok atau sebaris.

Contoh Senario: Menyembunyikan dan Menunjukkan Fungsi Suntingan

Mari tingkatkan struktur HTML yang mudah dengan fungsi yang dipertingkatkan:

<td>
  <a href="#" onclick="showStuff('answer1'); return false;">Edit</a>
  <span>

Kod ini memaparkan pautan "Edit" dan kawasan teks tersembunyi. Mengklik pautan harus menunjukkan kawasan teks dan menyembunyikan teks "Lorem ipsum".

Penyelesaian

Kami boleh mengubah suai fungsi showStuff untuk mengendalikan kedua-dua elemen menyembunyikan dan menunjukkan:

function showStuff(id, text, btn) {
    document.getElementById(id).style.display = 'block';
    // hide the lorem ipsum text
    document.getElementById(text).style.display = 'none';
    // hide the link
    btn.style.display = 'none';
}

Di sini, kami:

• Menunjukkan elemen sasaran (id) dengan menetapkan paparannya harta untuk disekat.
• Sembunyikan teks "Lorem ipsum" (teks) dengan menetapkan sifat paparannya kepada tiada.
• Sembunyikan pautan "Edit" (btn) dengan menetapkan sifat paparannya kepada tiada. .

Contoh Diubah Suai

Menggabungkan perubahan ini ke dalam HTML:

<td>
  <a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
  <span>

Apabila pautan "Edit" diklik, ia mencetuskan fungsi showStuff, yang menunjukkan kawasan teks, menyembunyikan teks "Lorem ipsum" dan menyembunyikan pautan itu sendiri.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyembunyikan dan Menunjukkan Elemen HTML Menggunakan Harta `display` JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!