Rumah >hujung hadapan web >tutorial js >Bagaimanakah Saya Boleh Menunjukkan dan Menyembunyikan Elemen DIV Menggunakan JavaScript?

Bagaimanakah Saya Boleh Menunjukkan dan Menyembunyikan Elemen DIV Menggunakan JavaScript?

Barbara Streisand
Barbara Streisandasal
2024-12-09 16:09:11354semak imbas

How Can I Show and Hide DIV Elements Using JavaScript?

Tunjukkan/Sembunyikan 'div' Menggunakan JavaScript

Apabila membina tapak web, togol keterlihatan elemen selalunya diingini. Ini boleh dicapai menggunakan JavaScript. Walau bagaimanapun, jika anda menghadapi masalah dengan kod anda, pertimbangkan penyelesaian yang berpotensi ini:

Memanipulasi Harta 'paparan'

Untuk menunjukkan atau menyembunyikan elemen, tetapkan 'paparan' sifat gaya kepada nilai yang dikehendaki:

// Hide an element
element.style.display = 'none';

// Show an element
element.style.display = 'block';

Memanipulasi 'keterlihatan' Harta

Jika anda mahu elemen masih menempati ruang semasa tersembunyi, laraskan sifat 'keterlihatan' sebaliknya:

// Hide an element
element.style.visibility = 'hidden';

// Show an element
element.style.visibility = 'visible';

Mengendalikan Koleksi Elemen

Untuk menyembunyikan berbilang elemen, ulangi dan tetapkan 'paparan' setiap elemen kepada 'tiada':

function hide(elements) {
  for (var i = 0; i < elements.length; i++) {
    elements[i].style.display = 'none';
  }
}

Memohon Pembetulan pada Kod Anda

Dalam kod anda, fungsi kedua tidak berfungsi kerana ia cuba menggantikan div2 dengan div1 kandungan. Untuk menunjukkan div2, gantikan baris ini dalam fungsi kedua:

document.getElementById('replace_target').innerHTML = document.getElementById('source').innerHTML;

dengan ini:

document.getElementById('replace_target').innerHTML = document.getElementById('target').innerHTML;

Dengan melaraskan sifat ini dan menggunakan teknik ini, anda kini boleh menogol keterlihatan div anda seperti yang dikehendaki.

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

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn