So rufen Sie die angewendeten Stilwerte eines DOM-Elements ab

Abrufen der Anzeigeeigenschaft eines DOM-Elements

Auf einer Webseite bestimmt die Anzeigeeigenschaft die Sichtbarkeit und das Layout eines Elements. Die .style.*-Eigenschaften bieten Zugriff auf die im HTML definierten Stilattribute, während die getComputedStyle()-Methode die angewendeten Stilwerte anzeigt.

Grundlegendes zu den .style.*-Eigenschaften

Die .style.*-Eigenschaften, wie z. B. .style.display, geben den Wert des entsprechenden Stilattributs zurück, das einem Element zugewiesen ist. Diese Eigenschaften spiegeln jedoch nicht die angewendeten Stile des Browsers wider. Beispielsweise im folgenden Codeausschnitt:

<code class="html"><style type="text/css">
  a { display: none; }
</style>

<script type="text/javascript">
  var a = (document.getElementById('a')).style;
  alert(a.display); // Displays an empty string
</script></code>

Die Eigenschaft .style.display des Elements „a“ gibt eine leere Zeichenfolge zurück, da im HTML kein Anzeigeattribut definiert ist. Dies ist irreführend, da das Element im CSS-Stylesheet visuell auf display: none eingestellt ist.

Verwenden von getComputedStyle() für angewendete Stilwerte

Um den angewendeten Stil abzurufen Für Werte verwenden Sie die Methode getComputedStyle(). Beispiel:

<code class="javascript">var a = document.getElementById('a');
var computedStyle = window.getComputedStyle(a);
alert(computedStyle.display); // Displays "none"</code>

In diesem Szenario gibt getComputedStyle() den tatsächlichen CSS-Wert zurück, der auf das „a“-Element angewendet wird.

Fazit

Beachten Sie beim Umgang mit Stileigenschaften den Unterschied zwischen den Stilattributen (Zugriff über .style.) und den angewendeten Stilwerten (Zugriff über getComputedStyle()). Die .style.-Eigenschaften spiegeln nur die im HTML definierten Stilattribute wider, die das visuelle Erscheinungsbild des Elements möglicherweise nicht genau wiedergeben. Verwenden Sie zu diesem Zweck immer getComputedStyle(), um die angewendeten Stilwerte abzurufen.

Das obige ist der detaillierte Inhalt vonSo rufen Sie die angewendeten Stilwerte eines DOM-Elements ab. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!