JavaScript/Window/getComputedStyle
Die Methode Window.getComputedStyle() ermittelt die Werte aller CSS-Eigenschaften eines Elements, nachdem die Stylesheets geladen sind. Sie erwartet die Angabe eines Elementobjekts und gibt ein CSSStyleDeclaration-Objekt zurück.
Syntax
var style = window.getComputedStyle(element[, pseudoElt]);
element: das Element, dessen Stil ermittelt werden sollPseutodElt: optionale Angabe eines Pseuodelements
Inhaltsverzeichnis
Anwendungsbeispiel
function getBackgroundColor (element) {
return window.getComputedStyle(element).backgroundColor;
}
Durch einen Klick auf den Button wird die Hintergrundfarbe des Buttons ausgelesen. Als Ergebnis wird die Farbe rot nicht als Name, sondern als rgb-Wert zurückgegeben. In em oder Prozent angegebene Längenangaben werden in Pixel umgerechnet.
bei Pseudo-Elementen
Sie können getComputedStyle() auch für Pseudoelemente benutzen, wenn Sie als zweiten Parameter den Namen des gewünschten Pseudoelements angeben. Die Browser verstehen hier die korrekte Version mit zwei Doppelpunkten und die veraltete Version mit einem Doppelpunkt.
<style>
p::after {
content: "selfhtml";
color: #306f91;
}
</style>
<body>
<p>Hallo </p>
<script>
let paragraph = document.querySelector("p");
let pStyle = window.getComputedStyle(paragraph, "::after");
console.log("Das ::after-Pseudoelement hat die Farbe " , pStyle.color);
</script
</body>
Siehe auch
- JavaScript und CSS
- JavaScript_und_CSS/CSS-Eigenschaften_auslesen
getComputedStyle
- JavaScript_und_CSS/CSS-Eigenschaften_auslesen
