Tämä viesti kertoo JavaScriptin ikkunaobjektin getComputedStyle()-menetelmän tavoitteesta, toiminnasta ja käytöstä.
Mitä ikkunaobjektin getComputedStyle()-menetelmä tekee JavaScriptissä?
' getComputedStyle() ' -menetelmä palauttaa 'CSSStyleDeclaration' -objektin, joka sisältää kokoelman CSS-ominaisuuksia ja niiden arvoja. Se laskee kohdistettujen HTML-elementtien tyyliominaisuudet. Lisäksi sillä on myös merkittävä rooli HTML-elementin tietyn osan tyyliominaisuuksien laskennassa.
Syntaksi
ikkuna. getComputedStyle ( elementti , pseudoelementti )
Yllä olevassa syntaksissa:
- ikkuna: Se on globaali objekti, joka edustaa selainikkunaa.
- elementti: Se määrittää tietyn HTML-elementin, jonka tyyli on laskettava.
- pseudoelementti: Se viittaa tietyn HTML-elementin osaan, esim. ensimmäinen kirjain, viimeinen kirjain jne.
Seuraavassa osiossa havainnollistetaan käytännössä 'getComputedStyle()' -metodia esimerkkien avulla.
HTML-koodi (mukaan lukien CSS-tyyli)
Tutustu ensin seuraavaan HTML-koodiin:
< pää >
< tyyli >
h3{
fonttikoko: 20px;
taustaväri: vihreä keltainen
}
< / tyyli >
< / pää >
< kehon >
< h2 > Käytä ikkunaobjektin getComputedStyle()-menetelmää < / h2 >
< h3 id = 'demo' > Annetun HTML-elementin fonttikoko on: < / h3 >
< s id = 'näyte' >< / s >
Yllä olevilla koodiriveillä:
- '
' -tunniste käyttää '' -tunnisteen ilmoitettua tyyliä ”HTML-elementti. - ' -osion alaotsikko sisältyy ' ”
- Seuraavaksi '
'-elementti, jolla on tunnus ' demo ” määrittää toisen alaotsikon.
- Lopuksi ' ' -tunniste viittaa tyhjään kappaleeseen, jossa on tunnus ' näyte 'kohdeelementin laskettujen CSS-ominaisuuksien näyttämiseen.
Huomautus: Tätä HTML-koodia seurataan kaikissa tämän viestin esimerkeissä.
Esimerkki 1: GetComputedStyle()-menetelmän käyttäminen HTML-elementin fonttikoon laskemiseen
Tässä esimerkissä käytetään 'getComputedStyle()'-menetelmää kohde-HTML-elementin kirjasinkoon saamiseksi.
JavaScript-koodi
Harkitse ilmoitettua JavaScript-koodia:
< käsikirjoitus >konst elementti = asiakirja. getElementById ( 'demo' ) ;
konst obj = ikkuna. getComputedStyle ( elementti )
anna kokoa = obj. getPropertyValue ( 'Fonttikoko' ) ;
asiakirja. getElementById ( 'näyte' ) . innerHTML = koko ;
käsikirjoitus >
Yllä olevassa koodinpätkässä:
- Ilmoita muuttuja ' elementti 'const'-avainsanalla, joka käyttää ' getElementById() ' -menetelmä päästäksesi '
' -elementtiin sen tunnuksen kautta ' demo ”.
- Käytä sen jälkeen ' getComputedStyle() ' -menetelmää haetun '
'-elementin CSS-ominaisuuksien laskemiseen.
- Seuraavaksi ' koko 'muuttuja käyttää ' getPropertyValue() 'menetelmä, joka palauttaa käytetyn CSS-ominaisuuden arvon' Fonttikoko ” merkkijonona.
- Lopuksi 'getElementById()'-menetelmä käyttää tyhjää kappaletta ja näyttää lasketun CSS-ominaisuuden arvon käyttämällä ' innerHTML ” omaisuutta.
Lähtö
Kuten näkyy, tulos näyttää käytetyn fonttikoon arvon vastaavaa HTML-elementtiä eli '
' vastaan.
Esimerkki 2: GetComputedStyle()-menetelmän käyttäminen HTML-elementin taustavärin laskemiseen
Tässä esimerkissä kuvattua menetelmää käytetään tietyn HTML-elementin taustavärin laskemiseen:
< käsikirjoitus >konst elementti = asiakirja. getElementById ( 'demo' ) ;
konst obj = ikkuna. getComputedStyle ( elementti )
anna bgcolor = obj. getPropertyValue ( 'taustaväri' ) ;
asiakirja. getElementById ( 'näyte' ) . innerHTML = bgcolor ;
käsikirjoitus >
Yllä olevassa koodilohkossa ' getComputedStyle() ' menetelmä laskee ' taustaväri '
'-elementistä, jonka tunnus on 'demo' ja palauttaa sen arvon muodossa 'rgb' getPropertyValue() ”menetelmä.
Lähtö
Tulos näyttää selvästi haetun HTML-elementin lasketun taustavärin.
Johtopäätös
JavaScript tarjoaa ' getComputedStyle() ” menetelmää kohde-HTML-elementin CSS-tyyliominaisuuksien laskemiseen. Tämän menetelmän laskettu arvo on merkkijono, joka sisältää CSS-ominaisuudet ja niiden arvot. Se voidaan toteuttaa eri tavoin käyttämällä JavaScriptiä minkä tahansa HTML-elementin CSS-ominaisuuksien saamiseksi. Tämä viesti tarjosi yksityiskohtaisen kuvan ikkunaobjektin 'getComputedStyle()' -menetelmän tavoitteesta, toiminnasta ja käytöstä JavaScriptissä.