Aquesta publicació explica l'objectiu, el funcionament i l'ús del mètode 'getComputedStyle()' de l'objecte finestra a JavaScript.
Què fa el mètode 'getComputedStyle()' de l'objecte finestra a JavaScript?
El ' getComputedStyle() ” retorna l'objecte “CSSStyleDeclaration” que conté una col·lecció de les propietats CSS i els seus valors. Calcula les propietats d'estil de l'element HTML objectiu. A més, també té un paper important en el càlcul de les propietats d'estil de la part específica de l'element HTML.
Sintaxi
finestra. getComputedStyle ( element , pseudoElement )
En la sintaxi anterior:
- finestra: És l'objecte global que representa la finestra del navegador.
- element: Especifica l'element HTML concret l'estil del qual s'ha de calcular.
- pseudoElement: Es refereix a la part de l'element HTML donat, per exemple, primera lletra, darrera lletra, etc.
La següent secció realitza la il·lustració pràctica del mètode “getComputedStyle()” amb l'ajuda d'exemples.
Codi HTML (inclòs l'estil CSS)
Primer, tingueu una visió general del codi HTML següent:
< cap >
< estil >
h3{
mida de la lletra: 20px;
color de fons: groc verd
}
< / estil >
< / cap >
< cos >
< h2 > Utilitzeu el mètode getComputedStyle() de l'objecte finestra < / h2 >
< h3 id = 'demo' > La mida de la lletra de l'element HTML donat és: < / h3 >
< pàg id = 'mostra' >< / pàg >
A les línies de codi anteriors:
- El '
'L'etiqueta aplica l'estil indicat de l'' ” Element HTML. - En el '
”, s'inclou un subtítol a la secció “ ” - A continuació, l'element '
' té un id ' demostració ” especifica un segon subtítol.
- Finalment, el ' L'etiqueta ' fa referència a un paràgraf buit amb un identificador ' mostra ” per mostrar les propietats CSS calculades de l'element objectiu.
Nota: Aquest codi HTML es segueix a tots els exemples indicats d'aquesta publicació.
Exemple 1: aplicació del mètode 'getComputedStyle()' per calcular la mida de la lletra de l'element HTML
Aquest exemple aplica el mètode 'getComputedStyle()' per obtenir la mida del tipus de lletra de l'element HTML objectiu.
Codi JavaScript
Considereu el codi JavaScript indicat:
< guió >const element = document. getElementById ( 'demo' ) ;
const obj = finestra. getComputedStyle ( element )
deixa mida = obj. getPropertyValue ( 'mida de la font' ) ;
document. getElementById ( 'mostra' ) . innerHTML = mida ;
guió >
Al fragment de codi anterior:
- Declarar una variable ' element ' amb una paraula clau 'const' que utilitza el ' getElementById() ” mètode per accedir a l'element “
” mitjançant el seu identificador “ demostració ”.
- Després d'això, apliqueu el ' getComputedStyle() ” per calcular les propietats CSS de l'element “
” obtingut.
- A continuació, el ' mida La variable ' aplica la variable ' getPropertyValue() ' mètode que retorna el valor de la propietat CSS aplicada ' mida de la font ” com una corda.
- Finalment, el mètode 'getElementById()' accedeix al paràgraf buit i mostra el valor de propietat CSS calculat mitjançant el ' innerHTML ' propietat.
Sortida
Com s'ha vist, la sortida mostra el valor de mida de lletra aplicat contra l'element HTML corresponent, és a dir, '
'.
Exemple 2: aplicació del mètode 'getComputedStyle()' per calcular el color de fons de l'element HTML
En aquest exemple, el mètode comentat s'utilitza per calcular el color de fons de l'element HTML específic:
< guió >const element = document. getElementById ( 'demo' ) ;
const obj = finestra. getComputedStyle ( element )
deixa bgcolor = obj. getPropertyValue ( 'color de fons' ) ;
document. getElementById ( 'mostra' ) . innerHTML = bgcolor ;
guió >
Al bloc de codi anterior, el ' getComputedStyle() El mètode ' calcula el ' color de fons ” de l'element “
” l'identificador del qual és “demo” i retorna el seu valor com a “rgb” mitjançant el “ getPropertyValue() ” mètode.
Sortida
La sortida mostra clarament el color de fons calculat de l'element HTML obtingut.
Conclusió
JavaScript ofereix el ' getComputedStyle() ” mètode per calcular les propietats d'estil CSS de l'element HTML objectiu. El valor calculat d'aquest mètode és una cadena que conté les propietats CSS i els seus valors. Es pot implementar de diferents maneres utilitzant JavaScript per obtenir les propietats CSS de qualsevol element HTML. Aquesta publicació va proporcionar una visió detallada de l'objectiu, el funcionament i l'ús del mètode 'getComputedStyle()' de l'objecte finestra a JavaScript.