Bagaimanakah Saya Boleh Menentukan Keterlihatan Elemen dalam DOM Hanya Menggunakan JavaScript?

Menentukan Keterlihatan Elemen dalam DOM Menggunakan JavaScript Tulen

Soalan:

Bolehkah kami menentukan jika elemen kelihatan dalam DOM tanpa bergantung pada jQuery? Khususnya, atribut manakah yang harus kita periksa untuk memastikan keterlihatannya?

Jawapan:

Menurut dokumentasi MDN, sifat offsetParent sesuatu elemen mengembalikan null jika ia atau mana-mana nenek moyangnya disembunyikan melalui sifat gaya paparan. Walau bagaimanapun, ini mengandaikan bahawa elemen itu tidak diposisikan tetap. Jika tiada kedudukan: elemen tetap terdapat pada halaman, skrip ringkas untuk menyemak keterlihatan boleh:

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

Jika terdapat kedudukan: elemen tetap pada halaman, bagaimanapun, malangnya kami terpaksa menggunakan tetingkap .getComputedStyle() untuk semakan menyeluruh, yang mungkin mempunyai implikasi prestasi:

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

Walaupun terdedah kepada kes tepi, pilihan kedua menawarkan kejelasan yang lebih besar. Jika operasi itu akan dilakukan berulang kali, pertimbangkan pilihan pertama untuk kecekapan, mengelakkan penalti prestasi window.getComputedStyle().

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menentukan Keterlihatan Elemen dalam DOM Hanya Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!