getComputedStyle – CSS Stil abfragen

getComputedStyle: Externes CSS + style-Tag + inline-CSS

window.getComputedStyle gibt die final berechneten CSS-Eigenschaften eines Elements zurück. Wenn Stile aus verschiedenen Quellen auf ein Element wirken (inline CSS, Stile aus CSS-Dateien, CSS im style-Tag …) oder sich der Zustand eines Elements durch Benutzeraktionen ändert, helfen die klassischen Abfragen wie elem.style und elem.getAttribute() nicht weiter.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

getComputedStyle

elem.style und getAttribute sind elementare Methoden, um CSS-Eigenschaften eines Elements auszulesen. Aber 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.

getComputedStyle() hingegen gibt alle CSS-Eigenschaften des Elements zurück – nachdem Eigenschaften aus CSS-Dateien, aus dem style-Tag und inline-CSS angwendet wurden.

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);
getComputedStyle().getPropertyValue("border")
getComputedStyle().getPropertyValue("background")

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

getComputedStyle().getPropertyValue("border-bottom-color")

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.

Neu in der Ausstellung
.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 + "
"; }

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)