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

Kesan Lembaran Gaya Induk pada Gaya paparan

Apabila memaparkan kandungan menggunakan gaya paparan HTML, adalah penting untuk memahami cara lembaran gaya sebaris dan induk mempengaruhi tingkah lakunya . Artikel ini meneroka isu di mana myDiv.style.display mengembalikan rentetan kosong apabila ditetapkan dalam helaian gaya induk, tidak seperti apabila ditetapkan dalam baris.

Keadaan Paparan Awal

HTML elemen biasanya bermula dengan nilai paparan lalai, biasanya "sebaris". Untuk mengatasi masalah ini, pembangun sering menggunakan gaya sebaris:

<div>

Walau bagaimanapun, untuk meningkatkan kebolehselenggaraan, adalah berfaedah untuk menetapkan gaya awal ini dalam helaian gaya induk.

Gelagat Tidak Dijangka

Apabila menetapkan paparan:tiada dalam helaian gaya induk, keadaan awal unsur itu tetap tersembunyi. Walau bagaimanapun, mengakses myDiv.style.display menggunakan JavaScript pada mulanya mengembalikan rentetan kosong. Ini berbeza daripada gaya sebaris, di mana ia mengembalikan "tiada".

Isu Selesai Menggunakan getComputedStyle

Penyelesaian kepada isu ini terletak pada pemahaman bahawa mengakses sifat CSS elemen secara langsung (cth., element.style.display) mendapatkan semula tetapan gaya sebaris mereka. Untuk mengakses gaya yang ditakrifkan dalam helaian gaya luaran atau lalai penyemak imbas, pembangun mesti menggunakan kaedah getComputedStyle:

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

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

Dengan menggunakan getComputedStyle, pembangun boleh mendapatkan semula nilai yang ditetapkan secara luaran dengan tepat, termasuk nilai dalam helaian gaya induk.

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