Ovaj post opisuje cilj, rad i upotrebu metode 'getComputedStyle()' objekta prozora u JavaScriptu.
Što radi metoda “getComputedStyle()” objekta Window u JavaScriptu?
' getComputedStyle() ” vraća objekt “CSSStyleDeclaration” koji sadrži kolekciju CSS svojstava i njihovih vrijednosti. Izračunava ciljana svojstva stila HTML elementa. Osim toga, također igra značajnu ulogu u izračunavanju svojstava stila određenog dijela HTML elementa.
Sintaksa
prozor. getComputedStyle ( element , pseudoElement )
U gornjoj sintaksi:
- prozor: To je globalni objekt koji predstavlja prozor preglednika.
- element: Određuje određeni HTML element čiji stil treba izračunati.
- pseudoElement: Odnosi se na dio zadanog HTML elementa, npr. prvo slovo, zadnje slovo itd.
Sljedeći odjeljak prikazuje praktičnu ilustraciju metode 'getComputedStyle()' uz pomoć primjera.
HTML kod (uključujući CSS stil)
Najprije imajte pregled sljedećeg HTML koda:
< glava >
< stil >
h3{
veličina fonta: 20px;
boja pozadine:zelenožuta
}
< / stil >
< / glava >
< tijelo >
< h2 > Koristite metodu getComputedStyle() objekta Window < / h2 >
< h3 iskaznica = 'demo' > Veličina fonta danog HTML elementa je: < / h3 >
< str iskaznica = 'uzorak' >< / str >
U gornjim redcima koda:
- '
” primjenjuje navedeni stil oznake „ ” HTML element. - u '
', podnaslov je uključen u ' ” - Zatim, element “
” koji ima ID “ demo ” navodi drugi podnaslov.
- Na kraju, ' ” oznaka se odnosi na prazan odlomak s ID-om “ uzorak ” za prikaz izračunatih CSS svojstava ciljanog elementa.
Bilješka: Ovaj HTML kod slijedi u svim navedenim primjerima ovog posta.
Primjer 1: Primjena metode “getComputedStyle()” za izračunavanje veličine fonta HTML elementa
Ovaj primjer primjenjuje metodu 'getComputedStyle()' za dobivanje veličine fonta ciljnog HTML elementa.
JavaScript kod
Razmotrite navedeni JavaScript kôd:
< skripta >konst element = dokument. getElementById ( 'demo' ) ;
konst obj = prozor. getComputedStyle ( element )
neka veličina = obj. getPropertyValue ( 'veličina fonta' ) ;
dokument. getElementById ( 'uzorak' ) . unutarnjiHTML = veličina ;
skripta >
U gornjem isječku koda:
- Deklarirajte varijablu “ element ' s ključnom riječi 'const' koja koristi ' getElementById() ” za pristup elementu “
” preko njegovog ID-a “ demo ”.
- Nakon toga primijenite ' getComputedStyle() ” za izračunavanje CSS svojstava dohvaćenog elementa “
”.
- Zatim, ' veličina ' varijabla primjenjuje ' getPropertyValue() ” metoda koja vraća vrijednost primijenjenog CSS svojstva “ veličina fonta ” kao niz.
- Na kraju, metoda 'getElementById()' pristupa praznom odlomku i prikazuje izračunatu vrijednost CSS svojstva koristeći ' unutarnjiHTML ” vlasništvo.
Izlaz
Kao što se vidi, izlaz prikazuje primijenjenu vrijednost veličine fonta u odnosu na odgovarajući HTML element, tj. “
”.
Primjer 2: Primjena metode “getComputedStyle()” za izračunavanje boje pozadine HTML elementa
U ovom primjeru, opisana metoda koristi se za izračunavanje boje pozadine određenog HTML elementa:
< skripta >konst element = dokument. getElementById ( 'demo' ) ;
konst obj = prozor. getComputedStyle ( element )
neka bgcolor = obj. getPropertyValue ( 'boja pozadine' ) ;
dokument. getElementById ( 'uzorak' ) . unutarnjiHTML = bgcolor ;
skripta >
U gornjem bloku koda, ' getComputedStyle() ' metoda izračunava ' boja pozadine ” elementa “
” čiji je ID “demo” i vraća svoju vrijednost kao “rgb” putem “ getPropertyValue() ” metoda.
Izlaz
Izlaz jasno pokazuje izračunatu boju pozadine dohvaćenog HTML elementa.
Zaključak
JavaScript nudi ' getComputedStyle() ” metoda za izračunavanje svojstava CSS stila ciljnog HTML elementa. Izračunata vrijednost ove metode je niz koji sadrži CSS svojstva i njihove vrijednosti. Može se implementirati na različite načine pomoću JavaScripta za dobivanje CSS svojstava bilo kojeg HTML elementa. Ovaj post pružio je detaljan prikaz cilja, rada i upotrebe metode 'getComputedStyle()' objekta prozora u JavaScriptu.