Ta objava opisuje cilj, delovanje in uporabo metode »getComputedStyle()« okenskega predmeta v JavaScriptu.
Kaj počne metoda »getComputedStyle()« predmeta Window v JavaScriptu?
' getComputedStyle() ” vrne objekt “CSSStyleDeclaration”, ki vsebuje zbirko lastnosti CSS in njihovih vrednosti. Izračuna ciljne lastnosti stila elementa HTML. Poleg tega igra tudi pomembno vlogo pri izračunu slogovnih lastnosti določenega dela elementa HTML.
Sintaksa
okno. getComputedStyle ( element , psevdoElement )
V zgornji sintaksi:
- okno: To je globalni objekt, ki predstavlja okno brskalnika.
- element: Določa določen element HTML, katerega slog je treba izračunati.
- psevdoElement: Nanaša se na del danega elementa HTML, npr. prva črka, zadnja črka itd.
Naslednji razdelek prikazuje praktično ilustracijo metode »getComputedStyle()« s pomočjo primerov.
Koda HTML (vključno s slogom CSS)
Najprej si oglejte naslednjo kodo HTML:
< glavo >
< stil >
h3{
velikost pisave: 20px;
barva ozadja:zelenorumena
}
< / stil >
< / glavo >
< telo >
< h2 > Uporabite metodo getComputedStyle() predmeta Window < / h2 >
< h3 id = 'demo' > Velikost pisave danega elementa HTML je: < / h3 >
< str id = 'vzorec' >< / str >
V zgornjih vrsticah kode:
- '
Oznaka uporablja navedeni slog oznake » ” Element HTML. - V '
« je podnaslov vključen v » ” - Nato element “
” z ID-jem “ demo ” določa drugi podnaslov.
- Nazadnje, ' » oznaka se nanaša na prazen odstavek z ID-jem » vzorec ” za prikaz izračunanih lastnosti CSS ciljnega elementa.
Opomba: Ta koda HTML je upoštevana v vseh navedenih primerih te objave.
1. primer: uporaba metode »getComputedStyle()« za izračun velikosti pisave elementa HTML
Ta primer uporablja metodo »getComputedStyle()« za pridobitev velikosti pisave ciljnega elementa HTML.
Koda JavaScript
Razmislite o navedeni kodi JavaScript:
< scenarij >konst element = dokument. getElementById ( 'demo' ) ;
konst obj = okno. getComputedStyle ( element )
naj velikost = obj. getPropertyValue ( 'velikost pisave' ) ;
dokument. getElementById ( 'vzorec' ) . notranjiHTML = velikost ;
scenarij >
V zgornjem delčku kode:
- Deklarirajte spremenljivko ' element « s ključno besedo »const«, ki uporablja » getElementById() ” za dostop do elementa “
” prek njegovega id-ja “ demo ”.
- Po tem uporabite » getComputedStyle() ” za izračun lastnosti CSS pridobljenega elementa “
”.
- Nato je ' velikost ' spremenljivka uporablja ' getPropertyValue() ' metoda, ki vrne vrednost uporabljene lastnosti CSS ' velikost pisave ” kot niz.
- Nazadnje metoda »getElementById()« dostopa do praznega odstavka in prikaže izračunano vrednost lastnosti CSS z uporabo » notranjiHTML ” lastnina.
Izhod
Kot vidimo, izhod prikazuje uporabljeno vrednost velikosti pisave glede na ustrezni element HTML, tj. »
«.
2. primer: uporaba metode »getComputedStyle()« za izračun barve ozadja elementa HTML
V tem primeru je obravnavana metoda uporabljena za izračun barve ozadja določenega elementa HTML:
< scenarij >konst element = dokument. getElementById ( 'demo' ) ;
konst obj = okno. getComputedStyle ( element )
naj bgcolor = obj. getPropertyValue ( 'Barva ozadja' ) ;
dokument. getElementById ( 'vzorec' ) . notranjiHTML = bgcolor ;
scenarij >
V zgornjem kodnem bloku je » getComputedStyle() ' metoda izračuna ' Barva ozadja « elementa »
«, katerega ID je »demo« in vrne svojo vrednost kot »rgb« prek » getPropertyValue() ” metoda.
Izhod
Izhod jasno prikazuje izračunano barvo ozadja pridobljenega elementa HTML.
Zaključek
JavaScript ponuja » getComputedStyle() ” metoda za izračun slogovnih lastnosti CSS ciljnega elementa HTML. Izračunana vrednost te metode je niz, ki vsebuje lastnosti CSS in njihove vrednosti. Implementirati ga je mogoče na različne načine z uporabo JavaScripta za pridobitev lastnosti CSS katerega koli elementa HTML. Ta objava je zagotovila podroben pogled na cilj, delovanje in uporabo metode »getComputedStyle()« objekta okna v JavaScriptu.