Mengapakah `element.style.display` Kosong Walaupun Saya Mempunyai Peraturan CSS?

Mengapa Sifat Gaya CSS Kekal Kosong dengan getElementById().style

Apabila anda menggunakan getElementById() untuk mendapatkan semula elemen HTML, mengaksesnya sifat gaya melalui element.style.display selalunya mengembalikan nilai kosong, walaupun terdapat peraturan gaya CSS seperti #map {display: block}.

Tingkah laku ini timbul kerana element.style hanya mencerminkan gaya sebaris secara eksplisit ditetapkan pada elemen dalam dokumen HTML. Jika tiada gaya sebaris ditentukan, element.style akan kosong.

Untuk mengakses gaya pengiraan sebenar elemen, yang menggabungkan kedua-dua gaya sebaris dan peraturan CSS, gunakan kaedah window.getComputedStyle(). Kaedah ini menyediakan objek Gaya yang mewakili gaya lengkap yang digunakan pada elemen.

Sebagai contoh, menggunakan console.log(window.getComputedStyle(document.getElementById('test')).display) akan mengeluarkan "block, " mencerminkan peraturan #map {display: block}.

Walaupun penggayaan sebaris secara amnya tidak digalakkan memihak kepada CSS, memahami perbezaan antara element.style dan window.getComputedStyle() adalah penting untuk mengakses gaya elemen dengan tepat dalam JavaScript.

Atas ialah kandungan terperinci Mengapakah `element.style.display` Kosong Walaupun Saya Mempunyai Peraturan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!