Bagaimana untuk Mendapatkan Kembali Sifat Paparan Elemen DOM dalam JavaScript dengan Tepat?

Mendapatkan kembali Sifat Paparan Elemen DOM

Dokumen menggariskan struktur HTML yang mengandungi dua elemen dengan sifat paparan yang berbeza-beza dan skrip JavaScript yang berinteraksi bersama mereka. Skrip cuba untuk mendapatkan semula sifat paparan setiap elemen, tetapi menemui hasil yang tidak dijangka. Setelah memaparkan nilai menggunakan sifat .style.* JavaScript, ia memerhati rentetan kosong dan bukannya nilai "tiada" dan "sekat" yang dijangkakan. Ini membawa kepada pertanyaan tentang kaedah yang betul untuk mendapatkan semula sifat paparan dengan tepat.

Cerapan utama terletak pada memahami perbezaan antara atribut gaya dan gaya yang digunakan. Sifat .style.* dalam JavaScript dipetakan terus pada atribut gaya, yang merupakan sifat dinamik yang terdapat dalam gaya sebaris elemen HTML. Walau bagaimanapun, gaya yang dipaparkan atau gaya yang digunakan sering dipengaruhi oleh faktor seperti peraturan CSS, warisan dan pilihan pengguna. Untuk mendapatkan semula gaya yang digunakan, seseorang mesti menggunakan kaedah getComputedStyle().

Sebagai contoh, jika seseorang menggunakan peraturan CSS berikut:

<code class="css">a {
    display: inline;
}</code>

Sifat .style.display untuk elemen penambat masih akan mengembalikan "tiada" (nilai sebaris), walaupun elemen itu muncul sebaris disebabkan oleh peraturan CSS. Ini kerana sifat .style.* hanya mencerminkan atribut gaya sebaris, bukan gaya yang digunakan.

Untuk mendapatkan semula gaya yang digunakan, seseorang mesti menggunakan kaedah getComputedStyle() kerana ia menyediakan akses kepada semua yang dikira dan gaya bertingkat, termasuk yang ditakrifkan oleh pilihan pengguna dan enjin gaya penyemak imbas. Berikut ialah contoh:

<code class="javascript">var a = (document.getElementById('a'));
var display = window.getComputedStyle(a).display;
alert(display); // Will output "inline"</code>

Sebagai amalan terbaik, adalah dinasihatkan untuk memisahkan pembentangan daripada logik dengan menogol .className dan bukannya mengubah suai sifat gaya secara langsung. Pendekatan ini menggalakkan modulariti, kebolehselenggaraan dan kebolehgunaan semula kod.

Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Kembali Sifat Paparan Elemen DOM dalam JavaScript dengan Tepat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!