Exemple
Obtenez le calculée (actual showing) couleur de fond d'un div:
<div id="test" style="height: 50px;background-color: lightblue;">Test
Div</div>
<p>The computed background color for the test div is: <span
id="demo"></span></p>
<script>
function myFunction() {
var elem = document.getElementById("test");
var
theCSSprop = window.getComputedStyle(elem,
null).getPropertyValue("background-color");
document.getElementById("demo").innerHTML = theCSSprop;
}
</script>Le résultat sera:
The computed background color for the test div is: rgb(173, 216, 230) Essayez vous - même » Plus "Try it Yourself" - "Try it Yourself" exemples ci - dessous.
Définition et utilisation
Le getComputedStyle() méthode obtient tout le réel (computed) propriété CSS et les valeurs de l'élément spécifié.
Le style calculé est le style acutally utilisé dans l'affichage de l'élément, après Stylings provenant de sources multiples ont été apllied.
sources de style peuvent inclure: des feuilles de style internes, des feuilles de style externes, les styles hérités et les styles par défaut du navigateur.
Le getComputedStyle() méthode retourne un objet CSSStyleDeclaration .
Support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge pleinement la méthode.
| méthode | |||||
|---|---|---|---|---|---|
| getComputedStyle() | 11.0 | 9.0 | 4.0 | 5 | 11.5 |
Syntaxe
Les valeurs des paramètres Paramètre La description element Champs obligatoires. L'élément pour obtenir le style calculé pour pseudoElement Optionnel. Un pseudo-élément pour obtenir
Détails techniques
Valeur de retour: Un objet CSSStyleDeclaration contenant bloc de déclaration CSS de l'élément.
autres exemples
Exemple
Obtenez tous les styles calculés à partir d'un élément:
<div id="test" style="height: 50px;background-color: lightblue;">Test
Div</div>
<p>The computed styles for the test div are: <br><span
id="demo"></span></p>
<script>
function myFunction(){
var elem = document.getElementById("test");
var txt;
cssObj = window.getComputedStyle(elem, null)
for
(i = 0; i < cssObj.length; i++) {
cssObjProp = cssObj.item(i)
txt += cssObjProp + " = " + cssObj.getPropertyValue(cssObjProp) + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
</script> Essayez vous - même » Exemple
Obtenir la taille de la police de l'ordinateur de la première lettre dans la div test (en utilisant pseudo-élément):
<div id="test" style="height: 50px;background-color: lightblue;">Test
Div</div>
<p>The computed font size for div::first-letter in the test div
is: <span id="demo"></span></p>
<script>
function myFunction(){
var elem = document.getElementById("test");
var
theCSSprop = window.getComputedStyle(elem,
"first-letter").getPropertyValue("font-size");
document.getElementById("demo").innerHTML = theCSSprop;
}
</script> Essayez vous - même »