Mengapakah `element.style` mengembalikan nilai kosong untuk gaya yang ditakrifkan dalam CSS?

Percanggahan Atribut Gaya JavaScript

S: Mengapa element.style secara konsisten mengembalikan nilai kosong apabila paparan ditentukan dalam CSS, walaupun elemen itu mewarisi gaya?

J: Sifat element.style mendapatkan semula gaya sebaris yang digunakan terus pada elemen dalam dokumen HTML. Gaya yang ditakrifkan dalam CSS tidak dianggap sebaris, dan oleh itu, element.style tidak akan mencerminkannya.

Gaya Dikira:

JavaScript menyediakan window.getComputedStyle() berfungsi untuk mendapatkan gaya berkesan sebenar yang digunakan pada sesuatu elemen. Fungsi ini mengambil elemen sebagai input dan mengembalikan objek ComputedStyle yang mengandungi nilai yang dikira untuk semua sifat CSS.

Contoh:

Pertimbangkan kod berikut:

<div>

#test {
  display: block;
}

Mengakses document.getElementById('test').style.display akan mengembalikan rentetan kosong, manakala window.getComputedStyle(document.getElementById('test')).display akan mengembalikan "block" dengan betul.

Kesimpulan:

Untuk mendapatkan gaya CSS yang digunakan untuk elemen, anda perlu menggunakan window.getComputedStyle(). Menggunakan element.style hanya mendapatkan semula gaya sebaris, yang biasanya tidak ditetapkan untuk elemen dengan CSS luaran.

Atas ialah kandungan terperinci Mengapakah `element.style` mengembalikan nilai kosong untuk gaya yang ditakrifkan dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!