Cara Mengambil dengan Tepat Sifat Paparan Elemen DOM dan Mengapa Harta .style Boleh Mengembalikan Rentetan Kosong

Mendapatkan semula Sifat Paparan Elemen DOM: Mendedahkan Nilai Sebenar

Kod HTML yang disediakan memperkenalkan perenggan dan sauh dengan paparan yang berbeza gaya. Walau bagaimanapun, mendapatkan semula gaya ini melalui sifat gaya nampaknya menghasilkan rentetan kosong yang tidak dijangka. Mengapakah ini berlaku, dan bagaimana anda boleh mendapatkan semula sifat paparan dengan tepat?

Teka-teki Rentetan Kosong

Kekeliruan awal timbul kerana .style.* sifat memetakan terus kepada atribut gaya, bukan pada gaya yang digunakan. Ini bermakna anda pada asasnya menyemak pengisytiharan gaya sebaris, yang mungkin tidak selalu mencerminkan gaya yang dikira.

Penyelesaian: getComputedStyle

Untuk mendapatkan gaya yang digunakan sebenar , termasuk sifat yang diwarisi, anda perlu menggunakan kaedah getComputedStyle. Kaedah ini mengambil elemen DOM sebagai hujah dan mengembalikan objek CSSStyleDeclaration yang mengandungi nilai gaya yang dikira.

Kod yang disediakan boleh diubah suai untuk menggunakan getComputedStyle seperti berikut:

<code class="javascript">var a = (document.getElementById('a'));
alert(getComputedStyle(a).display);
var p = (document.getElementById('p'));
alert(getComputedStyle(p).display);
p.style.display = 'none';
alert(getComputedStyle(p).display);</code>

Sekarang, yang pertama amaran akan memaparkan "tiada" untuk tag sauh, amaran kedua akan memaparkan "sekat" untuk elemen perenggan, dan amaran ketiga akan memaparkan "tiada" selepas tetapan paparan yang disengajakan. Ini menggambarkan dengan tepat gaya paparan unsur yang dikira.

Pendekatan Alternatif: Togol Kelas

Daripada bergantung pada sifat paparan, anda boleh mempertimbangkan untuk menggunakan nama kelas untuk menogol keterlihatan unsur. Dengan memisahkan pembentangan daripada logik, anda boleh memudahkan kod anda dan menjadikannya kurang terdedah kepada isu berkaitan gaya.

Atas ialah kandungan terperinci Cara Mengambil dengan Tepat Sifat Paparan Elemen DOM dan Mengapa Harta .style Boleh Mengembalikan Rentetan Kosong. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!