Rumah >hujung hadapan web >tutorial js >Bagaimanakah Saya Boleh Menentukan Keterlihatan Elemen dengan Tepat dalam DOM Menggunakan JavaScript Tulen?

Bagaimanakah Saya Boleh Menentukan Keterlihatan Elemen dengan Tepat dalam DOM Menggunakan JavaScript Tulen?

DDD
DDDasal
2024-11-29 22:17:11776semak imbas

How Can I Accurately Determine Element Visibility in the DOM Using Pure JavaScript?

Pengesanan Keterlihatan dalam DOM

Apabila bekerja dengan elemen dalam Model Objek Dokumen (DOM), selalunya perlu untuk menentukan sama ada elemen nampak. Dalam JavaScript tulen, tanpa menggunakan pustaka seperti jQuery, menyemak keterlihatan memerlukan pemeriksaan lebih teliti terhadap atribut HTML tertentu.

Untuk menentukan keterlihatan elemen, pertimbangkan atribut berikut:

  • paparan: Atribut ini menentukan gelagat paparan sesuatu elemen. Jika ditetapkan kepada "tiada", elemen itu disembunyikan.
  • keterlihatan: Atribut ini mengawal keterlihatan elemen, membenarkan ia tersembunyi atau kelihatan.

Dalam isu yang dibangkitkan, pengguna cuba menggunakan window.getComputedStyle(my_element)['display']) untuk menyemak keterlihatan, tetapi ia tidak tepat.

Walau bagaimanapun, pendekatan alternatif tersedia untuk menyemak keterlihatan elemen menggunakan sifat offsetParentnya. Jika elemen atau mana-mana ibu bapanya mempunyai sifat paparan ditetapkan kepada "tiada", offsetParentnya akan menjadi batal. Ini boleh digunakan untuk menentukan sama ada elemen kelihatan atau tidak.

Untuk elemen tanpa kedudukan tetap, fungsi berikut boleh digunakan:

function isHidden(el) {
    return (el.offsetParent === null);
}

Untuk elemen dengan kedudukan tetap, lebih pendekatan yang tepat ialah menggunakan window.getComputedStyle(), yang menyumbang lebih banyak kes tepi.

function isHidden(el) {
    var style = window.getComputedStyle(el);
    return (style.display === 'none');
}

Kaedah ini lebih komprehensif tetapi lebih perlahan daripada yang sebelumnya. Jika kelajuan membimbangkan, sebaiknya gunakan sifat offsetParent apabila boleh.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menentukan Keterlihatan Elemen dengan Tepat dalam DOM Menggunakan JavaScript Tulen?. 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