Mengapa `element.style` Kembali Kosong Apabila Gaya Ditakrifkan dalam Fail CSS Luaran?

Memahami Mengapa element.style Mengembalikan Kosong

Dalam JavaScript, sifat element.style biasanya mengembalikan atribut gaya sebaris yang digunakan terus pada elemen dalam dokumen HTML. Walau bagaimanapun, gaya sebaris bukanlah pendekatan yang diutamakan untuk elemen penggayaan kerana ia boleh menyebabkan ketidakkonsistenan kod dan isu kebolehselenggaraan.

Walau bagaimanapun, isu ini timbul apabila anda mentakrifkan gaya secara eksplisit dalam fail CSS luaran dan kemudian cuba mengaksesnya gaya menggunakan elemen.gaya. Dalam kes ini, element.style akan sentiasa mengembalikan objek kosong, membuatkan anda bingung.

Gaya Sebaris lwn. Dikira

Untuk memahami gelagat ini, penting untuk memahami perbezaan antara gaya sebaris dan dikira. Gaya sebaris merujuk kepada atribut gaya yang digunakan secara langsung pada elemen dalam dokumen HTML, manakala gaya yang dikira mewakili gabungan semua gaya yang berkenaan daripada setiap sumber yang berkenaan, termasuk gaya sebaris, helaian gaya CSS dan gaya ejen pengguna.

Ketidakupayaan JavaScript untuk Membaca Gaya CSS Secara Terus

JavaScript, dengan sendirinya, tidak mempunyai keupayaan untuk membaca gaya CSS secara langsung. Sebaliknya, ia bergantung pada enjin pemaparan penyemak imbas, yang mengira gaya yang dikira berdasarkan peraturan lata CSS.

Oleh itu, apabila anda mengakses element.style, anda hanya mengakses gaya sebaris, yang tiada dalam kes anda kerana anda telah menyediakan gaya dalam fail CSS luaran. Untuk mendapatkan gaya yang dikira, yang termasuk gaya CSS sebaris dan luaran, anda perlu menggunakan fungsi window.getComputedStyle(elemen).

Penyelesaian: Menggunakan getComputedStyle

Dalam senario anda, fungsi getComputedStyle akan memberikan yang diingini hasil:

console.log(window.getComputedStyle(document.getElementById('test')).display);

Baris kod ini akan log nilai sifat paparan seperti yang ditakrifkan dalam fail CSS anda, walaupun element.style.display mengembalikan rentetan kosong.

Jadi, perkara utama ialah element.style adalah khusus untuk gaya sebaris, manakala window.getComputedStyle menyediakan akses kepada kedua-dua gaya CSS sebaris dan luaran, yang anda perlukan untuk mendapatkan penggayaan dengan tepat maklumat.

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