Šiame įraše aprašomas „JavaScript“ lango objekto metodo „getComputedStyle()“ tikslas, veikimas ir naudojimas.
Ką „JavaScript“ veikia lango objekto metodas „getComputedStyle()“?
„ getComputedStyle() “ metodas grąžina „CSSStyleDeclaration“ objektą, kuriame yra CSS ypatybių ir jų reikšmių rinkinys. Jis apskaičiuoja tikslines HTML elementų stiliaus ypatybes. Be to, jis taip pat vaidina svarbų vaidmenį apskaičiuojant konkrečios HTML elemento dalies stiliaus savybes.
Sintaksė
langas. getComputedStyle ( elementas , pseudoElementas )
Aukščiau pateiktoje sintaksėje:
- langas: Tai visuotinis objektas, vaizduojantis naršyklės langą.
- elementas: Jis nurodo konkretų HTML elementą, kurio stilių reikia apskaičiuoti.
- pseudoelementas: Tai nurodo duoto HTML elemento dalį, pvz., pirmą raidę, paskutinę raidę ir pan.
Tolesnėje dalyje pateikiama praktinė „getComputedStyle()“ metodo iliustracija, naudojant pavyzdžius.
HTML kodas (įskaitant CSS stilių)
Pirmiausia apžvelkite šį HTML kodą:
< galva >
< stilius >
h3{
šrifto dydis: 20 pikselių;
fono spalva: žaliai geltona
}
< / stilius >
< / galva >
< kūnas >
< h2 > Naudokite lango objekto metodą getComputedStyle(). < / h2 >
< h3 id = 'demo' > Pateikto HTML elemento šrifto dydis yra: < / h3 >
< p id = 'pavyzdys' >< / p >
Aukščiau pateiktose kodo eilutėse:
- „
“ žyma taiko nurodytą „“ stilių “ HTML elementas. - Viduje '
“, paantraštė įtraukta į „ “ - Tada elementas „
“, turintis ID „ demo “ nurodo antrą paantraštę.
- Galiausiai „ ' žyma nurodo tuščią pastraipą su ID ' mėginys “, kad būtų rodomos apskaičiuotos tikslinio elemento CSS savybės.
Pastaba: Šio HTML kodo laikomasi visuose nurodytuose šio įrašo pavyzdžiuose.
1 pavyzdys: „getComputedStyle()“ metodo taikymas HTML elemento šrifto dydžiui apskaičiuoti
Šiame pavyzdyje taikomas metodas „getComputedStyle()“, kad būtų gautas tikslinio HTML elemento šrifto dydis.
JavaScript kodas
Apsvarstykite nurodytą „JavaScript“ kodą:
< scenarijus >konst elementas = dokumentas. getElementById ( 'demo' ) ;
konst obj = langas. getComputedStyle ( elementas )
tegul dydis = obj. getPropertyValue ( 'šrifto dydis' ) ;
dokumentas. getElementById ( 'pavyzdys' ) . vidinis HTML = dydis ;
scenarijus >
Aukščiau pateiktame kodo fragmente:
- Deklaruoti kintamąjį ' elementas “ su „const“ raktiniu žodžiu, kuris naudoja „ getElementById() “ būdas pasiekti „
“ elementą per jo ID „ demo “.
- Po to pritaikykite „ getComputedStyle() “ metodas, skirtas apskaičiuoti gauto „
“ elemento CSS ypatybes.
- Toliau „ dydis ' kintamasis taiko ' getPropertyValue() ' metodas, kuris grąžina pritaikytos CSS nuosavybės vertę ' šrifto dydis “ kaip styga.
- Galiausiai metodas „getElementById()“ pasiekia tuščią pastraipą ir parodo apskaičiuotą CSS nuosavybės vertę naudojant „ vidinis HTML ' nuosavybė.
Išvestis
Kaip matote, išvestyje rodoma pritaikyta šrifto dydžio reikšmė su atitinkamu HTML elementu, pvz., „
“.
2 pavyzdys: „getComputedStyle()“ metodo taikymas HTML elemento fono spalvai apskaičiuoti
Šiame pavyzdyje aptartas metodas naudojamas konkretaus HTML elemento fono spalvai apskaičiuoti:
< scenarijus >konst elementas = dokumentas. getElementById ( 'demo' ) ;
konst obj = langas. getComputedStyle ( elementas )
tegul bgcolor = obj. getPropertyValue ( 'fono spalva' ) ;
dokumentas. getElementById ( 'pavyzdys' ) . vidinis HTML = bgcolor ;
scenarijus >
Aukščiau esančiame kodo bloke „ getComputedStyle() “ metodas apskaičiuoja „ fono spalva “ elemento „
“, kurio ID yra „demo“ ir grąžina jo reikšmę kaip „rgb“ per „ getPropertyValue() “ metodas.
Išvestis
Išvestis aiškiai rodo apskaičiuotą gauto HTML elemento fono spalvą.
Išvada
„JavaScript“ siūlo „ getComputedStyle() “ metodą, skirtą tikslinio HTML elemento CSS stiliaus ypatybėms apskaičiuoti. Šio metodo apskaičiuota vertė yra eilutė, kurioje yra CSS ypatybės ir jų reikšmės. Jis gali būti įgyvendintas įvairiais būdais, naudojant JavaScript, norint gauti bet kurio HTML elemento CSS ypatybes. Šiame įraše buvo pateiktas išsamus „JavaScript“ lango objekto metodo „getComputedStyle()“ tikslo, veikimo ir naudojimo vaizdas.