Bagaimanakah Saya Boleh Mengakses dengan Tepat Harta `paparan` Elemen DOM?

Mengakses Sifat Paparan Elemen DOM Dengan Tepat

Mendapatkan semula sifat paparan unsur DOM boleh kelihatan mudah, tetapi hasil yang tidak dijangka mungkin timbul. Pertimbangkan contoh berikut:

var a = (document.getElementById('a')).style;
alert(a.display);

Makluman ini mungkin memaparkan rentetan kosong dan bukannya nilai "tiada" yang dijangkakan. Mengapa ini berlaku?

Isunya terletak pada perbezaan antara nilai atribut CSS dan gaya yang digunakan.

Nilai Atribut CSS lwn. Gaya Gunaan

Sifat .style.*, termasuk .display, memetakan kepada nilai atribut CSS, bukan pada gaya yang digunakan. Gaya yang digunakan mencerminkan hasil lata CSS dan mungkin berbeza daripada nilai atribut.

Dalam contoh yang diberikan, sifat paparan elemen "a" ditetapkan kepada "tiada" dalam gaya atribut CSS:

a {
  display: none;
}

Walau bagaimanapun, gaya yang digunakan mungkin berbeza disebabkan oleh helaian gaya luaran atau pengubahsuaian dinamik.

Menggunakan getComputedStyle

Untuk mendapatkan semula gaya yang digunakan dengan betul, gunakan kaedah getComputedStyle(). Ia memerlukan elemen sebagai hujah dan mengembalikan objek CSSStyleDeclaration yang mengandungi gaya CSS yang dikira.

var a = (document.getElementById('a'));
alert(getComputedStyle(a).display);  // Displays "none" as expected

Pendekatan Alternatif: Togol Kelas

Sebagai alternatif, pertimbangkan untuk menggunakan Kelas CSS untuk menogol keterlihatan elemen. Pendekatan ini memisahkan pembentangan daripada logik dan mengelakkan keperluan untuk memanipulasi atribut CSS secara langsung.

.hidden {
  display: none;
}

var p = document.getElementById('p');
p.classList.toggle('hidden'); // Toggles the display property

Dengan menggunakan getComputedStyle atau togol kelas, anda boleh mengakses dan mengawal sifat paparan unsur DOM dengan tepat.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengakses dengan Tepat Harta `paparan` Elemen DOM?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!