Dette innlegget skriver ned målsettingen, arbeidet og bruken av 'getComputedStyle()'-metoden for vinduobjekt i JavaScript.
Hva gjør 'getComputedStyle()'-metoden for Window Object i JavaScript?
« getComputedStyle() ”-metoden returnerer “CSSStyleDeclaration”-objektet som inneholder en samling av CSS-egenskapene og deres verdier. Den beregner de målrettede HTML-elementets stilegenskaper. I tillegg spiller den også en betydelig rolle i å beregne stilegenskapene til den spesifikke delen av HTML-elementet.
Syntaks
vindu. getComputedStyle ( element , pseudoElement )
I syntaksen ovenfor:
- vindu: Det er det globale objektet som representerer nettleservinduet.
- element: Den spesifiserer det bestemte HTML-elementet hvis stil må beregnes.
- pseudoElement: Det refererer til delen av det gitte HTML-elementet, f.eks. første bokstav, siste bokstav, etc.
Den følgende delen utfører den praktiske illustrasjonen av 'getComputedStyle()'-metoden ved hjelp av eksempler.
HTML-kode (inkludert CSS-styling)
Først har du en oversikt over følgende HTML-kode:
< hode >
< stil >
h3{
skriftstørrelse: 20px;
bakgrunnsfarge: grønngul
}
< / stil >
< / hode >
< kropp >
< h2 > Bruk metoden getComputedStyle() for Window Object < / h2 >
< h3 id = 'demo' > Skriftstørrelsen på det gitte HTML-elementet er: < / h3 >
< s id = 'prøve' >< / s >
I kodelinjene ovenfor:
- «
'-taggen bruker den angitte stilen til ' HTML-element. - I « '-delen, er en underoverskrift inkludert i ' ”
- Deretter '
'-elementet som har en id ' demo ” spesifiserer en andre underoverskrift.
- Til slutt, ' ' tag refererer til et tomt avsnitt med en id ' prøve ' for å vise de beregnede CSS-egenskapene til målelementet.
Merk: Denne HTML-koden følges gjennom alle de angitte eksemplene i dette innlegget.
Eksempel 1: Bruk av 'getComputedStyle()'-metoden for å beregne skriftstørrelsen til HTML-elementet
Dette eksemplet bruker 'getComputedStyle()'-metoden for å få skriftstørrelsen til HTML-målelementet.
JavaScript-kode
Tenk på den oppgitte JavaScript-koden:
< manus >konst element = dokument. getElementById ( 'demo' ) ;
konst obj = vindu. getComputedStyle ( element )
la størrelse = obj. getPropertyValue ( 'skriftstørrelse' ) ;
dokument. getElementById ( 'prøve' ) . indreHTML = størrelse ;
manus >
I kodebiten ovenfor:
- Deklarer en variabel ' element ' med et 'const' søkeord som bruker ' getElementById() '-metoden for å få tilgang til '
'-elementet via dets id ' demo '.
- Etter det bruker du ' getComputedStyle() ”-metoden for å beregne CSS-egenskapene til det hentede “
”-elementet.
- Deretter ' størrelse variabelen bruker ' getPropertyValue() ' metode som returnerer verdien av den brukte CSS-egenskapen ' skriftstørrelse ' som en streng.
- Til slutt får 'getElementById()'-metoden tilgang til det tomme avsnittet og viser den beregnede CSS-egenskapsverdien ved å bruke ' indreHTML ' eiendom.
Produksjon
Som sett viser utdataene den anvendte skriftstørrelsesverdien mot det tilsvarende HTML-elementet, dvs. '
'.
Eksempel 2: Bruk av 'getComputedStyle()'-metoden for å beregne bakgrunnsfargen til HTML-elementet
I dette eksemplet brukes den omtalte metoden til å beregne bakgrunnsfargen til det spesifikke HTML-elementet:
< manus >konst element = dokument. getElementById ( 'demo' ) ;
konst obj = vindu. getComputedStyle ( element )
la bgcolor = obj. getPropertyValue ( 'bakgrunnsfarge' ) ;
dokument. getElementById ( 'prøve' ) . indreHTML = bgcolor ;
manus >
I kodeblokken ovenfor, ' getComputedStyle() '-metoden beregner ' bakgrunnsfarge ' av '
'-elementet hvis ID er 'demo' og returnerer verdien som 'rgb' via ' getPropertyValue() 'metoden.
Produksjon
Utdataene viser tydelig den beregnede bakgrunnsfargen til det hentede HTML-elementet.
Konklusjon
JavaScript tilbyr ' getComputedStyle() ” metode for å beregne CSS-stilegenskapene til HTML-målelementet. Den beregnede verdien for denne metoden er en streng som inneholder CSS-egenskapene og deres verdier. Det kan implementeres på forskjellige måter ved å bruke JavaScript for å få CSS-egenskapene til ethvert HTML-element. Dette innlegget ga en detaljert oversikt over målet, virkemåten og bruken av 'getComputedStyle()'-metoden til vindusobjektet i JavaScript.