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

Master-Stylesheets und Inline-Stile: Verständnis des Verhaltens von Anzeigeeigenschaften

Beim Versuch, die Anzeigeeigenschaft eines DIV-Elements mithilfe von JavaScript abzurufen, trat eine Diskrepanz auf wurde beobachtet. Wenn Sie die Anzeige im HTML-Element inline auf „none“ festlegen, gibt myDiv.style.display wie erwartet „none“ zurück. Die Definition der Anzeige als „Keine“ in einem Master-Stylesheet führt jedoch zu einer leeren Zeichenfolge, wenn über myDiv.style.display darauf zugegriffen wird.

Dieses Verhalten wird anhand der Funktionsweise von JavaScript verstanden. Beim Zugriff auf DOM-Elemente über JavaScript kann der berechnete Stil des Elements nicht direkt abgerufen werden, da er in der CSS-Datei definiert ist.

Lösung: Verwendung von getComputedStyle

Zu erhalten Um den berechneten Stil zu ermitteln und diese Diskrepanz zu beheben, ist es erforderlich, die Eigenschaft getComputedStyle oder currentStyle für Internet Explorer zu verwenden. Diese Eigenschaft ruft den berechneten Wert der gewünschten Stileigenschaft ab.

JavaScript-Funktion zum Abrufen des berechneten Stils

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

Verwendung

Verwenden von getStyle zum Abrufen der Anzeigeeigenschaft:

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

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