Rumah >hujung hadapan web >tutorial css >Mengapakah `myDiv.style.display` Mengembalikan Rentetan Kosong Apabila Paparan Ditetapkan dalam Lembaran Gaya Induk?

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

Linda Hamilton
Linda Hamiltonasal
2024-11-06 19:31:02582semak imbas

Why Does `myDiv.style.display` Return an Empty String When Display Is Set in a Master Stylesheet?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn