Warum gibt „element.style' leere Werte zurück, wenn CSS-Stile in einer separaten Datei definiert sind?

CSS-Stileigenschaften in JavaScript verstehen

Beim Verweisen auf CSS-Stileigenschaften in JavaScript stoßen Entwickler häufig auf ein unerwartetes Problem: element.style gibt leer zurück Werte trotz der Definition von Stilen in der CSS-Datei. Dieser Artikel soll Aufschluss über dieses Verhalten geben und erklären, warum es auftritt.

Der Unterschied zwischen Inline- und berechneten Stilen

Die Eigenschaft element.style von JavaScript bietet Zugriff auf Inline-Stile direkt innerhalb eines HTML-Elements definiert. Wenn CSS-Stile jedoch separat in einer CSS-Datei definiert werden, gelten sie nicht als Inline-Stile. Stattdessen werden sie zu berechneten Stilen.

Berechnete Stile: Die angewendeten Werte

Berechnete Stile stellen die tatsächlichen Stileigenschaften dar, die auf ein Element angewendet werden, nachdem alle geerbten Stile und CSS-Regeln berücksichtigt wurden , und Browser-Standardwerte. Um auf berechnete Stile in JavaScript zuzugreifen, verwenden Sie die Funktion getComputedStyle().

Erklärung leerer element.style-Werte

element.style enthält nur Inline-Stile. Da CSS-Stile nicht inline definiert sind, sind sie nicht über element.style zugänglich und geben daher leere Werte zurück.

Beispiel:

<div>

#test {
  display: block;
}

console.log(document.getElementById('test').style.display); // Returns ""

Verwenden von getComputedStyle zum Abrufen berechneter Stile

Um den angewendeten Stil zu erhalten Eigenschaften, einschließlich der in CSS definierten, verwenden getComputedStyle():

console.log(window.getComputedStyle(document.getElementById('test')).display); // Returns "block"

Das obige ist der detaillierte Inhalt vonWarum gibt „element.style' leere Werte zurück, wenn CSS-Stile in einer separaten Datei definiert sind?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!