Cet article décrit l'objectif, le fonctionnement et l'utilisation de la méthode 'getComputedStyle()' de l'objet window en JavaScript.
Que fait la méthode 'getComputedStyle()' de l'objet Window en JavaScript ?
Le ' getComputedStyle() » renvoie l'objet « CSSStyleDeclaration » qui contient une collection des propriétés CSS et leurs valeurs. Il calcule les propriétés de style de l'élément HTML ciblé. En outre, il joue également un rôle important dans le calcul des propriétés de style de la partie spécifique de l'élément HTML.
Syntaxe
fenêtre. getComputedStyle ( élément , pseudoElement )
Dans la syntaxe ci-dessus :
- fenêtre: C'est l'objet global qui représente la fenêtre du navigateur.
- élément: Il spécifie l'élément HTML particulier dont le style doit être calculé.
- pseudoElement : Il fait référence à la partie de l'élément HTML donné, par exemple, la première lettre, la dernière lettre, etc.
La section suivante réalise l'illustration pratique de la méthode « getComputedStyle() » à l'aide d'exemples.
Code HTML (y compris le style CSS)
Tout d'abord, ayez un aperçu du code HTML suivant :
< diriger >
< style >
h3{
taille de police : 20 px ;
couleur de fond : vertjaune
}
< / style >
< / diriger >
< corps >
< h2 > Utiliser la méthode getComputedStyle() de l'objet Window < / h2 >
< h3 identifiant = 'démo' > La taille de la police de l'élément HTML donné est : < / h3 >
< p identifiant = 'goûter' >< / p >
Dans les lignes de code ci-dessus :
- Le '