getComputedStyle – CSS Stil abfragen

getComputedStyle

getComputedStyle() gibt alle CSS-Eigenschaften eines Elements zurück, nachdem Eigenschaften aus CSS-Dateien, aus dem style-Elementen im Kopf der Seite und aus nline-CSS angwendet wurden.

Das greift weiter als elem.style und getAttribute, den elementaren Methoden, die CSS-Eigenschaften eines Elements auslesen. elem.style als auch elem.getAttribute("style") lesen nur CSS-Eigenschaften, die mit dem style-Attribut des HTML-Elements eingesetzt wurden. Sie haben keinen Zugriff auf komplexe Selektoren wie a:hover oder h2 em – eine herbe Einschränkung.

window.getComputedStyle (elem [,pseudoElement]);

window.getComputedStyle hat zwei Argumente: das Element, dessen Stile erfragt werden und ein optionales Argument, das Zustände eines Pseudoselektors zurückgibt. Der Vorsatz window. muss nicht notiert werden.

const h2 = document.querySelector ("h2");
const allStyles  = window.getComputedStyle (h2);
console.log (allStyles);

let text = allStyles.cssText;
let json = JSON.stringify (allStyles)

Das zurückgegebene Objekt ist eine lange Liste aller Eigenschaften. Die Liste umfasst auch die Eigenschaften mit dem jeweiligen Browserpräfix.

Der Rückgabewert von getComputedStyle kann mit cssText als String benutzt werden. Alternativ strukturiert JSON.stringify () die Liste der CSS-Eigenschaften für die maschinelle Verarbeitung.

getPropertyValue

Ohne weitere Einschränkung gibt getComputedStyle eine CSSStyleDeclaration zurück – eine erschöpfende Liste aller Eigenschaft-Wert-Paare. Die CamelCase-Schreibweise filtert einen einzelnen Stil aus der Liste.

const borderColor = getComputedStyle (extraStyle).borderColor;

getPropertyValue() beschränkt die Ausgabe auf den Wert einer speziellen Eigenschaft.

• Mit CSS-Kurzschriften wie border oder background gibt es nur eine leere Antwort.
• CSS-Kurzfassungen wie border-color sind generell eher unzuverlässig.
• Erst bei der voll ausgeschriebene Eigenschaft border-bottom-color sind sich die Browser einig.

const borderStyle = getComputedStyle (extraStyle).getPropertyValue ("border");
console.log (borderStyle);

const borderColor = getComputedStyle (h2).getPropertyValue("border-color");
console.log (borderColor.cssText);

Während Chrome und Safari den vollen Satz von Eigenschaften zurückgeben, wenn getPropertyValue mit einer Kurzfassung wie border-color aufgerufen werden, liefern Firefox (und IE) nur den Wert einer voll ausgeschriebenen Eigenschaft.

Pseudo-Elemente mit getComputedStyle

Der zweite (optionale) Parameter von getComputedStyle richtet sich an Pseudo-Elemente wie before, after, first-line.

.elem:after {
	content: url("vase.webp");
	border: 1px solid orange;
}

<div class="elem">Ausstellung</div>

<script>
	let vase = document.querySelector(".elem");
	let style = window.getComputedStyle ( vase, ":after");
	document.querySelector(".result").textContent = "URL " + style.content;
</script>

Welche CSS-Stile unterstützt der Browser?

Bei einer allgemeinen Abfrage wie z.B. getComputedStyle (body) springen rund 250 CSS-Eigenschaften heraus, die das Element ertragen muss. Darunter sind auch die CSS-Eigenschaften, die nur mit dem Browser-Präfix erreicht werden.

const headsvg = document.querySelector(".headsvg");
const allStyles = getComputedStyle (headsvg);
const json = JSON.stringify (allStyles);
const text = json.split(",");
for (const item of text) {
	document.querySelector(".demo.listall").innerHTML += item + "<br>";
}

Alternative: cssRule()

Auf alle gelinkten und eingebetteten Stylesheets kann durch das Array document.styleSheets zugegriffen werden.

cssRule () kann eine vollständige CSS-Regel oder einzelne Eigenschaften einer CSS-Regel auslesen und ändern, bevor die HTML-Elemente existieren. Damit macht Javascript ein anfängliches Verhalten für den Besucher unsichtbar und vermeidet das Zappeln zu Beginn des Scripts.

cssRule (target, attribute, value)

target ist ein String, der die angesprochene CSS-Regel enthält, z.B.

• h2 für <h2>-Tags
• #id für Elemente mit der ID id
• .class für Elemente der Klasse class

Der Parameter attribute ist optional.

Der Parameter value ist optional und ändert die Regel oder Eigenschaft.

cssRule ('p', '', '');
cssRule ('#content', '', 'border: 4px solid green;');

CSS-Stile auslesen

Das Auslesen einer finalen gerenderten CSS-Eigenschaft kommt nicht so häufig vor wie das Ändern von Stilen, aber Javascript stellt vier Methoden zur Verfügung, um das CSS eines Elements auszulesen: elem.style, getAttribute('style'), getComputedStyle und cssRule().

elem.style

Auslesen und Ändern des style-Attributs eines HTML-Elements
elem.style.color

elem.getAttribute

Die Methoden getAttribute() und setAttribute() von HTML-Elementen
elem.getAttribute("style");

window.getComputedStyle(elem)

getComputedStyle(elem).color

Style-Element cssRule()

Die Funktion cssRule() aus der Level 2 Style Specification
cssRule (target, attribute, value)

Für die Synchronisation von Javascript-Animationen kann getComputedStyle die aktuellen Werte von Eigenschaften des animierten Elements auslesen, z.B.:

getComputedStyle (elem).transform;