Šiame straipsnyje aprašomi būdai, kaip pridėti CSS naudojant „JavaScript“.
Kaip pridėti CSS naudojant „JavaScript“?
„JavaScript“ galite pridėti CSS stilių prie elemento modifikuodami jo stiliaus ypatybę naudodami šiuos metodus arba metodus:
- stilius Savybė kaip įterptas stilius
- setAttribute() Metodas kaip eilutinis stilius
- CreateElement() metodas kaip visuotinis stilius
1 būdas: pridėkite CSS su „JavaScript“ naudodami „stiliaus“ ypatybę
Norėdami pridėti CSS į „JavaScript“, naudokite „ stilius ' nuosavybė. Jis naudojamas norint pasiekti ir manipuliuoti elemento eilutiniais stiliais. Tai suteikia objektą, vaizduojantį elemento eilutinį stilių ir leidžiantį gauti arba nustatyti individualias stiliaus ypatybes.
Sintaksė
Norint pridėti CSS stilių į „JavaScript“, naudojama ši sintaksė stilius ' nuosavybė:
elementas. stilius ;
Čia, ' elementas “ yra nuoroda į HTML elementą.
Pavyzdys
Šiame pavyzdyje mygtukų stilių sukursime naudodami „JavaScript“. Pirmiausia sukursime tris mygtukus ir priskirsime jiems ID, kurie padės pasiekti stiliaus mygtukų elementus:
< mygtuko ID = 'btn2' > Atmesti mygtuką >
< mygtuko ID = 'btn3' > Priimti mygtuką >
Prieš formuojant stilių, išvestis atrodys taip:
Dabar sukurkime šių mygtukų stilių „JavaScript“ naudodami „ stilius ' nuosavybė. Pirmiausia gaukite visus mygtuko elementus naudodami jiems priskirtus ID naudodami „ getElementById() “ metodas:
tegu susitaria = dokumentas. getElementById ( 'btn1' ) ;tegu atmeta = dokumentas. getElementById ( 'btn2' ) ;
tegul priima = dokumentas. getElementById ( 'btn3' ) ;
Nustatykite visų šių mygtukų fono spalvas naudodami „ stilius ' nuosavybė:
sutinku. stilius . fono spalva = 'žalias' ;atmesti. stilius . fono spalva = 'raudona' ;
priimti. stilius . fono spalva = 'geltona' ;
Kaip matote, mygtukai buvo sėkmingai sukurti naudojant „ stilius ' nuosavybė:
2 būdas: pridėkite CSS su „JavaScript“ naudodami „setAttribute()“ metodą
Norėdami pridėti CSS stilių „JavaScript“, naudokite „ setAttribute() “ metodas. Jis naudojamas atributui ir jo vertei nustatyti arba pridėti prie HTML elemento.
Sintaksė
Ši sintaksė naudojama „ setAttribute() “ metodas:
Pavyzdys
Čia mes nustatysime skirtingus „JavaScript“ mygtukų stilius naudodami „ setAttribute() “ metodas. Nustatykite visų mygtukų kraštinės spindulį į ' .5rem ir teksto spalva Sutinku “ ir „ Atmesti “ mygtukai į „ baltas “.
atmesti. setAttribute ( 'stilius' , 'fono spalva: raudona; spalva: balta; kraštinės spindulys: .5 rem;' ) ;
priimti. setAttribute ( 'stilius' , 'fono spalva: geltona; kraštinės spindulys: .5 rem;' ) ;
Išvestis
3 būdas: pridėkite CSS su „JavaScript“ naudodami „createElement()“ metodą
Jei norite sukurti klases ar ID naudodami „JavaScript“ stilių, kaip ir CSS stilių, naudokite „ sukurti elementą () “ metodas. Jis naudojamas dinamiškai sukurti naują elementą. Norėdami sukurti stilių, sukurkite „ stilius “ elementas naudojant šį metodą. „ CreateElement ('stilius') ” metodas JavaScript yra naudojamas dinamiškai sukurti naują stiliaus elementą, kurį galima naudoti CSS stiliams pridėti prie tinklalapio.
Sintaksė
Nurodyta sintaksė naudojama „ sukurti elementą () “ metodas:
Norėdami pridėti CSS stilių į „JavaScript“, naudokite nurodytą sintaksę:
konst stilius = dokumentas. sukurtiElementą ( 'stilius' ) ;Tada pridėkite stiliaus elementą prie galvos žymos naudodami toliau pateiktą sintaksę:
dokumentas. galva . pridėti Vaikas ( stilius ) ;Čia, ' stilius “ yra nuoroda į naujai sukurtą stiliaus elementą ir „ dokumentas.galva “ yra pagrindinis HTML dokumento elementas.
Pavyzdys
Pirmiausia sukurkite stiliaus elementą naudodami „ sukurti elementą () “ metodas:
Dabar sukurkite „ btn “ klasė, skirta taikyti tą patį stilių visiems mygtukams ir ID btn1 “, „ btn2 “ ir „ btn3 “ individualiam mygtuko stiliui:
stilius. vidinis HTML = `. btn {
šriftas - dydis : 1,1 rem ;
kamšalas : 3 piks ;
marža : 2px ;
šriftas - šeima : be - serifas ;
siena - spindulys : .5rem ;
}
#btn1 {
fone - spalva : žalias ;
spalva : baltas ;
}
#btn2 {
fone - spalva : raudona ;
spalva : baltas ;
}
#btn3 {
fone - spalva : geltona ;
}
` ;
Dabar pridėkite stiliaus elementą prie dokumento antraštės, pervesdami kaip parametrą į ' appendChild() “ metodas:
dokumentas. galva . pridėti Vaikas ( stilius ) ; Išvestis
Tai viskas apie CSS pridėjimą „JavaScript“.
Išvada
Norėdami pridėti CSS su „JavaScript“, naudokite tiesioginį stilių, įskaitant „ stilius „Nuosavybė ir“ setAttribute() “ metodą arba visuotinį stilių naudojant „ sukurti elementą () “ metodas. Visuotinis stilius yra efektyvesnis, o eilutinis metodas nerekomenduojamas, nes dėl to sunku išlaikyti taikymo stilius ir gali kartotis kodas. Šiame straipsnyje aprašyti būdai, kaip pridėti CSS naudojant „JavaScript“.