Mengapakah `myDiv.style.display` Mengembalikan Rentetan Kosong Apabila Paparan Ditetapkan dalam Lembaran Gaya Induk?

Lembaran Gaya Induk dan Gaya Sebaris: Memahami Gelagat Harta Paparan

Apabila cuba mendapatkan semula sifat paparan unsur DIV menggunakan JavaScript, percanggahan telah diperhatikan. Menetapkan paparan kepada tiada sebaris dalam elemen HTML, myDiv.style.display mengembalikan "tiada" seperti yang diharapkan. Walau bagaimanapun, mentakrifkan paparan sebagai tiada dalam helaian gaya induk menghasilkan rentetan kosong apabila diakses melalui myDiv.style.display.

Tingkah laku ini difahami berdasarkan cara JavaScript beroperasi. Apabila mengakses elemen DOM melalui JavaScript, gaya pengiraan elemen tidak boleh diambil secara langsung kerana ia ditakrifkan dalam fail CSS.

Penyelesaian: Menggunakan getComputedStyle

Untuk mendapatkan gaya yang dikira dan menangani percanggahan ini, adalah perlu untuk menggunakan sifat getComputedStyle atau currentStyle untuk Internet Explorer. Sifat ini mendapatkan semula nilai pengiraan sifat gaya yang diingini.

Fungsi JavaScript untuk Mendapatkan semula Gaya Dikira

function getStyle(id, name) {
  var element = document.getElementById(id);
  return element.currentStyle
    ? element.currentStyle[name]
    : window.getComputedStyle
    ? window.getComputedStyle(element, null).getPropertyValue(name)
    : null;
}

Penggunaan

Menggunakan getStyle untuk mendapatkan semula sifat paparan:

var display = getStyle('myDiv', 'display');
alert(display); //will print 'none' or 'block' or 'inline' etc

Atas ialah kandungan terperinci Mengapakah `myDiv.style.display` Mengembalikan Rentetan Kosong Apabila Paparan Ditetapkan dalam Lembaran Gaya Induk?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!