Această postare descrie obiectivul, funcționarea și utilizarea metodei „getComputedStyle()” a obiectului fereastră în JavaScript.
Ce face metoda „getComputedStyle()” a obiectului fereastră în JavaScript?
„ getComputedStyle() ” returnează obiectul „CSSStyleDeclaration” care conține o colecție de proprietăți CSS și valorile acestora. Acesta calculează proprietățile de stil ale elementelor HTML vizate. În plus, joacă, de asemenea, un rol semnificativ în calcularea proprietăților de stil ale părții specifice a elementului HTML.
Sintaxă
fereastră. getComputedStyle ( element , pseudoElement )
În sintaxa de mai sus:
- fereastră: Este obiectul global care reprezintă fereastra browserului.
- element: Specifică elementul HTML specific al cărui stil trebuie calculat.
- pseudoElement: Se referă la partea elementului HTML dat, de exemplu, prima literă, ultima literă etc.
Următoarea secțiune realizează ilustrarea practică a metodei „getComputedStyle()” cu ajutorul exemplelor.
Cod HTML (inclusiv stilul CSS)
Mai întâi, aveți o privire de ansamblu asupra următorului cod HTML:
< cap >
< stil >
h3{
dimensiunea fontului: 20px;
culoare de fundal:verdegalben
}
< / stil >
< / cap >
< corp >
< h2 > Utilizați metoda getComputedStyle() pentru obiectul fereastră < / h2 >
< h3 id = 'demo' > Dimensiunea fontului elementului HTML dat este: < / h3 >
< p id = 'probă' >< / p >
În rândurile de cod de mai sus:
- „
Eticheta ” aplică stilul declarat pentru „ ” Element HTML. - În '
”, se include o subtitlu în secțiunea „ ” - Apoi, elementul „
” având un id „ demonstrație ” precizează o a doua subpoziție.
- În cele din urmă, „ Eticheta ” se referă la un paragraf gol cu un id ” probă ” pentru afișarea proprietăților CSS calculate ale elementului vizat.
Notă: Acest cod HTML este urmat în toate exemplele menționate ale acestei postări.
Exemplul 1: aplicarea metodei „getComputedStyle()” pentru a calcula dimensiunea fontului elementului HTML
Acest exemplu aplică metoda „getComputedStyle()” pentru a obține dimensiunea fontului elementului HTML țintă.
Cod JavaScript
Luați în considerare codul JavaScript menționat:
< scenariu >const element = document. getElementById ( 'demo' ) ;
const obj = fereastră. getComputedStyle ( element )
lasa dimensiunea = obj. getPropertyValue ( 'marimea fontului' ) ;
document. getElementById ( 'probă' ) . innerHTML = mărimea ;
scenariu >
În fragmentul de cod de mai sus:
- Declarați o variabilă „ element ” cu un cuvânt cheie „const” care utilizează „ getElementById() ” pentru a accesa elementul „
” prin id-ul său „ demonstrație ”.
- După aceea, aplicați „ getComputedStyle() ” pentru a calcula proprietățile CSS ale elementului „
” preluat.
- În continuare, „ mărimea „variabila” aplică „ getPropertyValue() ” metoda care returnează valoarea proprietății CSS aplicate ” marimea fontului ” ca o sfoară.
- În cele din urmă, metoda „getElementById()” accesează paragraful gol și afișează valoarea proprietății CSS calculată folosind „ innerHTML ” proprietate.
Ieșire
După cum s-a văzut, rezultatul afișează valoarea aplicată a mărimii fontului față de elementul HTML corespunzător, adică „
”.
Exemplul 2: Aplicarea metodei „getComputedStyle()” pentru a calcula culoarea de fundal a elementului HTML
În acest exemplu, metoda discutată este utilizată pentru a calcula culoarea de fundal a elementului HTML specific:
< scenariu >const element = document. getElementById ( 'demo' ) ;
const obj = fereastră. getComputedStyle ( element )
lasă bgcolor = obj. getPropertyValue ( 'culoare de fundal' ) ;
document. getElementById ( 'probă' ) . innerHTML = bgcolor ;
scenariu >
În blocul de cod de mai sus, „ getComputedStyle() „Metoda” calculează „ culoare de fundal ” din elementul „
” al cărui id este „demo” și returnează valoarea sa ca „rgb” prin intermediul „ getPropertyValue() ” metoda.
Ieșire
Rezultatul arată clar culoarea de fundal calculată a elementului HTML preluat.
Concluzie
JavaScript oferă „ getComputedStyle() ” metoda pentru calcularea proprietăților de stil CSS ale elementului HTML țintă. Valoarea calculată a acestei metode este un șir care conține proprietățile CSS și valorile acestora. Poate fi implementat în diferite moduri folosind JavaScript pentru a obține proprietățile CSS ale oricărui element HTML. Această postare a oferit o vedere detaliată a obiectivului, funcționării și utilizării metodei „getComputedStyle()” a obiectului fereastră în JavaScript.