Šajā ziņā ir aprakstīts JavaScript loga objekta metodes getComputedStyle() mērķis, darbība un lietojums.
Ko JavaScript dara loga objekta metode “getComputedStyle()”?
' getComputedStyle() ” metode atgriež objektu “CSSStyleDeclaration”, kas satur CSS rekvizītu un to vērtību kolekciju. Tas aprēķina mērķa HTML elementu stila īpašības. Turklāt tam ir arī nozīmīga loma konkrētās HTML elementa daļas stila īpašību aprēķināšanā.
Sintakse
logs. getComputedStyle ( elements , pseidoElements )
Iepriekš minētajā sintaksē:
- logs: Tas ir globālais objekts, kas attēlo pārlūkprogrammas logu.
- elements: Tas norāda konkrēto HTML elementu, kura stils ir jāaprēķina.
- pseidoElements: Tas attiecas uz dotā HTML elementa daļu, piemēram, pirmo burtu, pēdējo burtu utt.
Nākamajā sadaļā ar piemēru palīdzību ir praktiski ilustrēta metode “getComputedStyle()”.
HTML kods (ieskaitot CSS stilu)
Vispirms apskatiet šo HTML kodu:
< galvu >
< stils >
h3{
fonta izmērs: 20 pikseļi;
fona krāsa: zaļi dzeltena
}
< / stils >
< / galvu >
< ķermeni >
< h2 > Izmantojiet loga objekta metodi getComputedStyle(). < / h2 >
< h3 id = 'demo' > Dotā HTML elementa fonta lielums ir: < / h3 >
< lpp id = 'paraugs' >< / lpp >
Iepriekš minētajās koda rindās:
- '
tags izmanto norādīto stilu ”HTML elements. - Iekš ' ”, apakšvirsraksts ir iekļauts sadaļā “ ”
- Pēc tam elementam '
' ir ID ' demo ” norāda otru apakšvirsrakstu.
- Visbeidzot, ' ' tags attiecas uz tukšu rindkopu ar ID ' paraugs ”, lai parādītu mērķētā elementa aprēķinātās CSS rekvizītus.
Piezīme: Šis HTML kods tiek ievērots visos norādītajos šīs ziņas piemēros.
1. piemērs. Metodes “getComputedStyle()” izmantošana, lai aprēķinātu HTML elementa fonta lielumu
Šajā piemērā tiek izmantota metode “getComputedStyle()”, lai iegūtu mērķa HTML elementa fonta lielumu.
JavaScript kods
Apsveriet norādīto JavaScript kodu:
< skripts >konst elements = dokumentu. getElementById ( 'demo' ) ;
konst obj = logs. getComputedStyle ( elements )
ļauj izmēru = obj. getPropertyValue ( 'fonta izmērs' ) ;
dokumentu. getElementById ( 'paraugs' ) . innerHTML = Izmērs ;
skripts >
Iepriekš minētajā koda fragmentā:
- Deklarē mainīgo ' elements ' ar atslēgvārdu 'const', kas izmanto ' getElementById() ' metode, lai piekļūtu elementam '
', izmantojot tā ID ' demo ”.
- Pēc tam izmantojiet ' getComputedStyle() ” metodi, lai aprēķinātu ienestā “
” elementa CSS rekvizītus.
- Tālāk “ Izmērs ' mainīgais piemēro ' getPropertyValue() ' metode, kas atgriež lietotā CSS rekvizīta vērtību ' fonta izmērs ” kā stīgu.
- Visbeidzot, metode “getElementById()” piekļūst tukšajai rindkopai un parāda aprēķināto CSS rekvizītu vērtību, izmantojot “ innerHTML ” īpašums.
Izvade
Kā redzams, izvade parāda lietoto fonta lieluma vērtību pret atbilstošo HTML elementu, t.i., “
”.
2. piemērs. Metodes “getComputedStyle()” izmantošana, lai aprēķinātu HTML elementa fona krāsu
Šajā piemērā aplūkotā metode tiek izmantota, lai aprēķinātu konkrētā HTML elementa fona krāsu:
< skripts >konst elements = dokumentu. getElementById ( 'demo' ) ;
konst obj = logs. getComputedStyle ( elements )
ļaujiet bgcolor = obj. getPropertyValue ( 'fona krāsa' ) ;
dokumentu. getElementById ( 'paraugs' ) . innerHTML = bgcolor ;
skripts >
Iepriekš minētajā koda blokā ' getComputedStyle() ' metode aprēķina ' fona krāsa ” elementam “
”, kura ID ir “demo” un atgriež tā vērtību kā “rgb”, izmantojot “ getPropertyValue() ” metode.
Izvade
Izvade skaidri parāda ienestā HTML elementa aprēķināto fona krāsu.
Secinājums
JavaScript piedāvā ' getComputedStyle() ” metode mērķa HTML elementa CSS stila īpašību aprēķināšanai. Šīs metodes aprēķinātā vērtība ir virkne, kas satur CSS rekvizītus un to vērtības. To var ieviest dažādos veidos, izmantojot JavaScript, lai iegūtu jebkura HTML elementa CSS rekvizītus. Šī ziņa sniedza detalizētu ieskatu par JavaScript loga objekta metodes “getComputedStyle()” mērķi, darbību un izmantošanu.