Cara Mendapatkan Nilai Gaya Gunaan Elemen DOM

Mendapatkan semula Sifat Paparan Elemen DOM

Dalam halaman web, sifat paparan menentukan keterlihatan dan reka letak elemen. Sifat .style.* menyediakan akses kepada atribut gaya yang ditakrifkan dalam HTML, manakala kaedah getComputedStyle() mendedahkan nilai gaya yang digunakan.

Memahami .style.* Sifat

Sifat .style.*, seperti .style.display, mengembalikan nilai atribut gaya sepadan yang diberikan kepada elemen. Walau bagaimanapun, sifat ini tidak menggambarkan gaya yang digunakan penyemak imbas. Sebagai contoh, dalam coretan kod berikut:

<code class="html"><style type="text/css">
  a { display: none; }
</style>

<script type="text/javascript">
  var a = (document.getElementById('a')).style;
  alert(a.display); // Displays an empty string
</script></code>

Sifat .style.display bagi elemen "a" mengembalikan rentetan kosong kerana tiada atribut paparan yang ditakrifkan dalam HTML. Ini mengelirukan kerana elemen ditetapkan secara visual untuk dipaparkan: tiada dalam helaian gaya CSS.

Menggunakan getComputedStyle() untuk Nilai Gaya Gunaan

Untuk mendapatkan semula gaya yang digunakan nilai, gunakan kaedah getComputedStyle(). Contohnya:

<code class="javascript">var a = document.getElementById('a');
var computedStyle = window.getComputedStyle(a);
alert(computedStyle.display); // Displays "none"</code>

Dalam senario ini, getComputedStyle() mengembalikan nilai CSS sebenar yang digunakan pada elemen "a".

Kesimpulan

Apabila berurusan dengan sifat gaya, ketahui perbezaan antara atribut gaya (diakses melalui .style.) dan nilai gaya yang digunakan (diakses melalui getComputedStyle()). Sifat .style. hanya mencerminkan atribut gaya yang ditakrifkan dalam HTML, yang mungkin tidak mewakili penampilan visual elemen dengan tepat. Untuk tujuan itu, sentiasa gunakan getComputedStyle() untuk mendapatkan nilai gaya yang digunakan.

Atas ialah kandungan terperinci Cara Mendapatkan Nilai Gaya Gunaan Elemen DOM. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!