Warum gibt „myDiv.style.display' eine leere Zeichenfolge zurück, wenn es in einem Master-Stylesheet festgelegt wird?

Auswirkungen von Master-Stylesheets auf den Anzeigestil

Bei der Anzeige von Inhalten im HTML-Anzeigestil ist es wichtig zu verstehen, wie sich Inline- und Master-Stylesheets auf das Verhalten auswirken . In diesem Artikel wird das Problem untersucht, bei dem myDiv.style.display eine leere Zeichenfolge zurückgibt, wenn es in einem Master-Stylesheet festgelegt wird, anders als wenn es inline festgelegt wird.

Anfangszustand der Anzeige

HTML Elemente beginnen normalerweise mit einem Standardanzeigewert, normalerweise „inline“. Um dies zu überschreiben, verwenden Entwickler häufig Inline-Stile:

<div>

Um die Wartbarkeit zu erhöhen, ist es jedoch von Vorteil, diese anfänglichen Stile in einem Master-Stylesheet festzulegen.

Unerwartetes Verhalten

Beim Festlegen von display:none in einem Master-Stylesheet bleibt der Anfangszustand des Elements verborgen. Der Zugriff auf myDiv.style.display mit JavaScript gibt jedoch zunächst eine leere Zeichenfolge zurück. Dies unterscheidet sich von Inline-Stilen, bei denen „none“ zurückgegeben wird.

Gelöstes Problem mit getComputedStyle

Die Lösung für dieses Problem liegt im Verständnis des direkten Zugriffs auf die CSS-Eigenschaften eines Elements (z. B. element.style.display) ruft ihre Inline-Stileinstellungen ab. Um auf Stile zuzugreifen, die in externen Stylesheets oder Browser-Standardeinstellungen definiert sind, müssen Entwickler die getComputedStyle-Methode verwenden:

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.

Durch die Verwendung von getComputedStyle können Entwickler extern festgelegte Werte genau abrufen, einschließlich derjenigen in Master-Stylesheets.

Das obige ist der detaillierte Inhalt vonWarum gibt „myDiv.style.display' eine leere Zeichenfolge zurück, wenn es in einem Master-Stylesheet festgelegt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!