Mengapakah `element.style` Mengembalikan Nilai Kosong Apabila Gaya CSS Ditakrifkan dalam Fail Berasingan?

Memahami Sifat Gaya CSS dalam JavaScript

Apabila merujuk sifat gaya CSS dalam JavaScript, pembangun sering menghadapi isu yang tidak dijangka: element.style kembali kosong nilai walaupun menentukan gaya dalam fail CSS. Artikel ini bertujuan untuk memberi penerangan tentang tingkah laku ini dan menerangkan sebab ia berlaku.

Perbezaan Antara Gaya Sebaris dan Dikira

sifat elemen.style JavaScript menyediakan akses kepada gaya sebaris ditakrifkan secara langsung dalam elemen HTML. Walau bagaimanapun, apabila gaya CSS ditakrifkan secara berasingan dalam fail CSS, ia tidak dianggap sebagai gaya sebaris. Sebaliknya, ia menjadi gaya yang dikira.

Gaya Dikira: Nilai Digunakan

Gaya yang dikira mewakili sifat gaya sebenar yang digunakan pada elemen selepas mempertimbangkan semua gaya yang diwarisi, peraturan CSS , dan nilai lalai penyemak imbas. Untuk mengakses gaya yang dikira dalam JavaScript, gunakan fungsi getComputedStyle().

Penjelasan Elemen Kosong.Nilai gaya

elemen.style memegang gaya sebaris sahaja. Memandangkan gaya CSS tidak ditakrifkan sebaris, ia tidak boleh diakses melalui element.style dan dengan itu mengembalikan nilai kosong.

Contoh:

<div>

#test {
  display: block;
}

console.log(document.getElementById('test').style.display); // Returns ""

Menggunakan getComputedStyle untuk Mendapatkan semula Gaya Dikira

Untuk mendapatkan sifat gaya yang digunakan, termasuk yang ditakrifkan dalam CSS, gunakan getComputedStyle():

console.log(window.getComputedStyle(document.getElementById('test')).display); // Returns "block"

Atas ialah kandungan terperinci Mengapakah `element.style` Mengembalikan Nilai Kosong Apabila Gaya CSS Ditakrifkan dalam Fail Berasingan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!