Wie greife ich mit JavaScript auf berechnete Stile zu, wenn Inline-Stile die Master-Stylesheet-Einstellungen überschreiben?

Zugriff auf Stil aus dem Master-Stylesheet mit JavaScript

Wenn die Anzeigeeigenschaft eines Div in einem Master-Stylesheet auf „none“ gesetzt wird und dies versucht wird Wenn Sie über JavaScript mit myDiv.style.display darauf zugreifen, wird möglicherweise ein leerer Rückgabewert angezeigt. Dies liegt daran, dass zwischen Inline-Stilen und berechneten Stilen unterschieden wird.

Inline-Stile werden direkt auf dem HTML-Element selbst festgelegt, während berechnete Stile eine Kombination aller auf ein Element angewendeten Stile sind, einschließlich der darin festgelegten externe Stylesheets oder übergeordnete Elemente. Wenn ein Inline-Stil vorhanden ist, überschreibt er alle widersprüchlichen berechneten Stile.

Wenn Sie über JavaScript auf die Stileigenschaft eines Elements zugreifen, können Sie nur die Inline-Stile lesen. Wenn Sie daher die Anzeigeeigenschaft im Master-Stylesheet auf „none“ setzen, aber über einen Inline-Stil verfügen, der diese überschreibt, gibt myDiv.style.display eine leere Zeichenfolge zurück.

Um auf den berechneten Stil zuzugreifen, benötigen Sie um die Funktion getComputedStyle() zu verwenden. Diese Funktion gibt ein Objekt zurück, das alle berechneten Stile für ein Element enthält, einschließlich der in externen Stylesheets oder übergeordneten Elementen festgelegten Stile.

Hier ist ein Beispiel für die Verwendung von getComputedStyle() zum Abrufen der berechneten Anzeigeeigenschaft:

var display = getComputedStyle(myDiv).display;

Mit getComputedStyle() können Sie auf den berechneten Stil eines Elements zugreifen, auch wenn dieser durch ein Inline-Element überschrieben wurde Stil.

Das obige ist der detaillierte Inhalt vonWie greife ich mit JavaScript auf berechnete Stile zu, wenn Inline-Stile die Master-Stylesheet-Einstellungen überschreiben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!