Функktion getComputedStyle

Die Funktion getComputedStyle ermöglicht es, den Wert einer beliebigen CSS-Eigenschaft eines Elements zu erhalten, sogar aus einer CSS-Datei.

Syntax

javascriptlet Objekt = getComputedStyle(Element);

Details

So funktioniert es (Achtung: nicht so, wie wir es erwarten): Die Funktion nimmt das Element als Parameter entgegen und gibt ein Objekt zurück, das alle CSS-Eigenschaften des übergebenen Elements enthält. Lassen Sie uns dieses Objekt in einer Variable style speichern. Der Name ist beliebig, es ist einfach eine Variable - wie wir sie uns ausdenken, so werden wir darauf zugreifen:

javascriptlet elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // in style liegen die CSS-Eigenschaften

Lassen Sie uns zum Beispiel die Breite ausgeben. Das macht man so - style.width:

javascriptlet elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log(style.width);

Um zum Beispiel den linken padding auszugeben - macht man so - style.paddingLeft:

javascriptlet elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log(style.paddingLeft);

Im nächsten Beispiel geben wir alle für uns interessanten CSS-Eigenschaften für unser Element aus:

html<div id="elem">text</div>

css#elem {
  width: 200px;
  height: 200px;
  padding: 30px;
  border: 20px solid #BCBCBC;
  overflow: auto;
}

javascriptlet elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log('paddingLeft: ' + style.paddingLeft); // gibt '30px' aus
console.log('borderTopWidth: ' + style.borderTopWidth); // gibt '20px' aus
console.log('borderTopStyle: ' + style.borderTopStyle); // gibt 'solid' aus

Ungenauigkeit von getComputedStyle

Manchmal funktioniert die Funktion getComputedStyle nicht ganz korrekt mit Breite und Höhe. Das hängt damit zusammen, dass padding und Rand den Block erweitern. Im nächsten Beispiel hat der Block eine Breite von 200px, sowie einen Rand und border. Die tatsächliche Breite des Blocks beträgt 300px, aber getComputedStyle gibt trotzdem 200px aus:

html<div id="elem">text</div>

css#elem {
  width: 200px;
  height: 200px;
  padding: 30px;
  border: 20px solid #BCBCBC;
  overflow: auto;
}

javascriptlet elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // gibt '200px' aus
console.log('height: ' + style.height); // gibt '200px' aus

Das heißt: Es stellt sich heraus, dass getComputedStyle die Blockerweiterung ignoriert und seine Abmessungen so anzeigt, als ob diese Erweiterung nicht vorhanden wäre. Das ist aber noch nicht alles: Auch das Vorhandensein oder Fehlen einer Scrollleiste spielt eine Rolle - einige Browser subtrahieren die Breite der Scrollleiste von der Breite, die über getComputedStyle berechnet wurde, andere subtrahieren sie nicht. Kurz gesagt, hier ist überhaupt alles nicht cross-browser-kompatibel und es ist besser, getComputedStyle nicht zur Bestimmung von Breite und Höhe zu verwenden, sondern die Metriken zu nutzen, die wir weiter unten studieren werden.

Berechnete Werte

Es gibt noch einen weiteren Nuance: Wenn die Breite in % angegeben ist - dann werden wir sie nach der Anwendung von getComputedStyle in px sehen. Das heißt, im Grunde erhalten wir nicht die angegebene Breite, sondern die berechnete. Sehen Sie sich das folgende Beispiel an:

html<div id="elem">text</div>

css#elem {
  width: 30%; /* Breite in % angegeben */
  height: 200px;
  padding: 30px;
  border: 20px solid #BCBCBC;
  overflow: auto;
}

javascriptlet elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // gibt die Breite in px aus

Siehe auch