Dette indlæg fastlægger formålet, arbejdet og brugen af 'getComputedStyle()'-metoden for vinduesobjekt i JavaScript.
Hvad gør 'getComputedStyle()'-metoden til Window Object i JavaScript?
Det ' getComputedStyle() ”-metoden returnerer objektet “CSSStyleDeclaration”, der indeholder en samling af CSS-egenskaberne og deres værdier. Det beregner de målrettede HTML-elements stilegenskaber. Derudover spiller det også en væsentlig rolle i beregningen af stilegenskaberne for den specifikke del af HTML-elementet.
Syntaks
vindue. getComputedStyle ( element , pseudoElement )
I ovenstående syntaks:
- vindue: Det er det globale objekt, der repræsenterer browservinduet.
- element: Det specificerer det bestemte HTML-element, hvis stil skal beregnes.
- pseudoElement: Det refererer til den del af det givne HTML-element, f.eks. første bogstav, sidste bogstav osv.
Det følgende afsnit udfører den praktiske illustration af 'getComputedStyle()'-metoden ved hjælp af eksempler.
HTML-kode (inklusive CSS-styling)
Først skal du have et overblik over følgende HTML-kode:
< hoved >
< stil >
h3{
skriftstørrelse: 20px;
baggrundsfarve: grøngul
}
< / stil >
< / hoved >
< legeme >
< h2 > Brug getComputedStyle() metoden til Window Object < / h2 >
< h3 id = 'demo' > Skriftstørrelsen på det givne HTML-element er: < / h3 >
< s id = 'prøve' >< / s >
I ovenstående kodelinjer:
- Det '
' tag anvender den angivne stil af ' ' HTML-element. - I ' ”-afsnittet, er en underoverskrift inkluderet i ” ”
- Dernæst '
'-elementet med et id ' demo ” specificerer en anden underoverskrift.
- Til sidst, ' ' tag henviser til et tomt afsnit med et id ' prøve ” for at vise de beregnede CSS-egenskaber for det målrettede element.
Bemærk: Denne HTML-kode følges gennem alle de angivne eksempler i dette indlæg.
Eksempel 1: Anvendelse af 'getComputedStyle()'-metoden til at beregne HTML-elementets skriftstørrelse
Dette eksempel anvender metoden 'getComputedStyle()' for at få skriftstørrelsen på HTML-målelementet.
JavaScript kode
Overvej den angivne JavaScript-kode:
< manuskript >konst element = dokument. getElementById ( 'demo' ) ;
konst obj = vindue. getComputedStyle ( element )
lad størrelse = obj. getPropertyValue ( 'skriftstørrelse' ) ;
dokument. getElementById ( 'prøve' ) . indreHTML = størrelse ;
manuskript >
I ovenstående kodestykke:
- Erklære en variabel ' element ' med et 'const' søgeord, der bruger ' getElementById() '-metoden for at få adgang til '
'-elementet via dets id ' demo ”.
- Anvend derefter ' getComputedStyle() ” metode til at beregne CSS-egenskaberne for det hentede “
”-element.
- Dernæst ' størrelse variabel anvender ' getPropertyValue() ' metode, der returnerer værdien af den anvendte CSS-egenskab ' skriftstørrelse ” som en streng.
- Til sidst får 'getElementById()'-metoden adgang til det tomme afsnit og viser den beregnede CSS-egenskabsværdi ved hjælp af ' indreHTML ” ejendom.
Produktion
Som det ses, viser outputtet den anvendte skriftstørrelsesværdi mod det tilsvarende HTML-element, dvs. '
'.
Eksempel 2: Anvendelse af 'getComputedStyle()'-metoden til at beregne HTML-elementets baggrundsfarve
I dette eksempel bruges den omtalte metode til at beregne baggrundsfarven for det specifikke HTML-element:
< manuskript >konst element = dokument. getElementById ( 'demo' ) ;
konst obj = vindue. getComputedStyle ( element )
lad bgcolor = obj. getPropertyValue ( 'baggrundsfarve' ) ;
dokument. getElementById ( 'prøve' ) . indreHTML = bgcolor ;
manuskript >
I ovenstående kodeblok er ' getComputedStyle() '-metoden beregner ' baggrundsfarve ' af '
'-elementet, hvis id er 'demo' og returnerer dets værdi som 'rgb' via ' getPropertyValue() ” metode.
Produktion
Outputtet viser tydeligt den beregnede baggrundsfarve for det hentede HTML-element.
Konklusion
JavaScript tilbyder ' getComputedStyle() ” metode til at beregne CSS-stilegenskaberne for HTML-målelementet. Den beregnede værdi af denne metode er en streng, der indeholder CSS-egenskaberne og deres værdier. Det kan implementeres på forskellige måder ved hjælp af JavaScript for at få CSS-egenskaberne for ethvert HTML-element. Dette indlæg gav en detaljeret visning af formålet, arbejdet og brugen af 'getComputedStyle()'-metoden for vinduesobjektet i JavaScript.