Mengapakah `this.style[property]` JavaScript Mengembalikan Rentetan Kosong?

JavaScript's this.style[property] Mengembalikan Rentetan Kosong: Mendedahkan Punca dan Penyelesaian

Apabila mengakses this.style[property] harta dalam JavaScript, anda mungkin menghadapi situasi di mana ia mendapatkan semula rentetan kosong dan bukannya nilai yang dijangkakan. Ini boleh membingungkan, terutamanya jika anda cuba mendapatkan semula sifat gaya yang telah ditetapkan.

Memahami Isu

this.style[property] direka bentuk untuk akses gaya yang telah diperuntukkan terus kepada elemen dalam HTMLnya atau melalui gaya sebaris. Jika sifat yang diminta tidak ditetapkan secara eksplisit untuk elemen, this.style[property] akan mengembalikan rentetan kosong.

Kes Gaya Lata

Selalunya, gaya untuk elemen ditakrifkan dalam helaian gaya CSS. Gaya ini bertingkat, bermakna ia diwarisi dan ditindih berdasarkan peraturan tertentu. Apabila elemen sepadan dengan berbilang peraturan lembaran gaya, peraturan yang paling khusus diutamakan.

Dalam contoh yang diberikan, elemen #test mempunyai dua gaya yang ditakrifkan dalam lembaran gaya: ketinggian: 100px; dan lebar: 100px;. Walau bagaimanapun, elemen itu juga mempunyai gaya latar belakang sebaris: #CCC;, yang mengatasi peraturan lembaran gaya ujian untuk latar belakang.

Disebabkan sifat CSS yang melata, this.style[width] dan this.style [ketinggian] akan mendapatkan rentetan kosong, kerana sifat ini telah ditetapkan dalam helaian gaya tetapi ditindih oleh gaya sebaris.

Penyelesaian: getComputedStyle()

Untuk mendapatkan semula nilai sifat gaya berkesan, yang termasuk gaya bertingkat, anda boleh menggunakan kaedah getComputedStyle():

const myElement = document.getElementById('myId');
const style = getComputedStyle(myElement);
console.log(style.height); // "100px"

getComputedStyle() mengembalikan objek yang mewakili gaya pengiraan elemen yang ditentukan, dengan mengambil kira semua gaya yang digunakan, termasuk yang diwarisi dan sifat ganti.

Atas ialah kandungan terperinci Mengapakah `this.style[property]` JavaScript Mengembalikan Rentetan Kosong?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!