Šajā rakstā tiks aprakstītas metodes, kā pievienot CSS ar JavaScript.
Kā pievienot CSS ar JavaScript?
Programmā JavaScript elementam var pievienot CSS stilus, pārveidojot tā stila rekvizītu, izmantojot šādas metodes vai pieejas:
- stils Īpašums kā iekļauts stils
- setAttribute() Metode kā iekļauts stils
- CreateElement() metode kā globāls stils
1. metode: pievienojiet CSS ar JavaScript, izmantojot rekvizītu 'stils'.
Lai JavaScript pievienotu CSS, izmantojiet ' stils ” īpašums. To izmanto, lai piekļūtu elementa iekļautajiem stiliem un manipulētu ar tiem. Tas dod objektu, kas attēlo elementa iekļautos stilus un ļauj iegūt vai iestatīt individuālas stila īpašības.
Sintakse
Lai JavaScript pievienotu CSS stilu, tiek izmantota šāda sintakse. stils ” īpašums:
elements. stils ;
Šeit, ' elements ” ir atsauce uz HTML elementu.
Piemērs
Nākamajā piemērā pogas tiks veidotas, izmantojot JavaScript. Pirmkārt, mēs izveidosim trīs pogas un piešķirsim tām ID, kas palīdz piekļūt stila pogas elementiem:
< pogas ID = 'btn2' > Noraidīt pogu >
< pogas ID = 'btn3' > Pieņemt pogu >
Pirms stila izveides izvade izskatīsies šādi:
Tagad izveidosim šo pogu stilu JavaScript, izmantojot stils ” īpašums. Vispirms iegūstiet visus pogas elementus, izmantojot tiem piešķirtos ID, izmantojot ' getElementById() ” metode:
lai vienotos = dokumentu. getElementById ( 'btn1' ) ;ļaujiet noraidīt = dokumentu. getElementById ( 'btn2' ) ;
ļauj pieņemt = dokumentu. getElementById ( 'btn3' ) ;
Iestatiet visu šo pogu fona krāsas, izmantojot ' stils ” īpašums:
piekrītu. stils . fona krāsa = 'zaļš' ;noraidīt. stils . fona krāsa = 'sarkans' ;
pieņemt. stils . fona krāsa = 'dzeltens' ;
Kā redzat, pogas ir veiksmīgi veidotas, izmantojot ' stils ” īpašums:
2. metode: pievienojiet CSS ar JavaScript, izmantojot metodi “setAttribute()”.
Lai JavaScript pievienotu CSS stilu, izmantojiet ' setAttribute() ” metode. To izmanto, lai iestatītu vai pievienotu atribūtu un tā vērtību HTML elementam.
Sintakse
Šī sintakse tiek izmantota ' setAttribute() ” metode:
Piemērs
Šeit mēs iestatīsim dažādus JavaScript pogu stilus, izmantojot “ setAttribute() ” metode. Iestatiet visu pogu apmales rādiusu uz “ .5rem ”, un teksta krāsa Piekrītu ' un ' Noraidīt ' pogas uz ' balts ”.
noraidīt. setAttribute ( 'stils' , 'fona krāsa: sarkana; krāsa: balta; apmales rādiuss: 0,5 rem;' ) ;
pieņemt. setAttribute ( 'stils' , 'fona krāsa: dzeltena; apmales rādiuss: 0,5 rem;' ) ;
Izvade
3. metode: pievienojiet CSS ar JavaScript, izmantojot metodi “createElement()”.
Ja vēlaties izveidot klases vai ID JavaScript stilā tāpat kā CSS stilā, izmantojiet ' CreateElement() ” metode. To izmanto, lai dinamiski izveidotu jaunu elementu. Veidošanai izveidojiet ' stils ” elements, izmantojot šo metodi. ' CreateElement ('stils') ” metode JavaScript tiek izmantota, lai dinamiski izveidotu jaunu stila elementu, ko var izmantot, lai tīmekļa lapai pievienotu CSS stilus.
Sintakse
Dotā sintakse tiek izmantota ' CreateElement() ” metode:
Lai JavaScript pievienotu CSS stilu, izmantojiet norādīto sintaksi:
konst stils = dokumentu. izveidotElement ( 'stils' ) ;Pēc tam pievienojiet stila elementu head tagam, izmantojot tālāk norādīto sintaksi:
dokumentu. galvu . pievienotBērns ( stils ) ;Šeit, ' stils ” ir atsauce uz jaunizveidoto stila elementu un „ dokuments.galva ” ir HTML dokumenta galvenais elements.
Piemērs
Vispirms izveidojiet stila elementu, izmantojot ' CreateElement() ” metode:
Tagad izveidojiet ' btn klase vienāda stila pielietošanai visām pogām un ID btn1 ”, “ btn2 ' un ' btn3 ” individuālai pogu veidošanai:
stils. innerHTML = `. btn {
fontu - Izmērs : 1,1 rem ;
polsterējums : 3 pikseļi ;
starpība : 2 pikseļi ;
fontu - ģimene : bez - serifs ;
robeža - rādiuss : .5rem ;
}
#btn1 {
fons - krāsa : zaļš ;
krāsa : balts ;
}
#btn2 {
fons - krāsa : sarkans ;
krāsa : balts ;
}
#btn3 {
fons - krāsa : dzeltens ;
}
` ;
Tagad pievienojiet stila elementu dokumenta galvenē, kā parametru nosūtot ' appendChild() ” metode:
dokumentu. galvu . pievienotBērns ( stils ) ; Izvade
Tas viss attiecas uz CSS pievienošanu JavaScript.
Secinājums
Lai pievienotu CSS ar JavaScript, izmantojiet iekļauto stilu, tostarp ' stils 'Īpašums un' setAttribute() ” metodi vai globālo stilu, izmantojot CreateElement() ” metode. Globālais stils ir efektīvāks, savukārt iekļautā metode nav ieteicama, jo tā apgrūtina lietojumprogrammu stilu uzturēšanu un var izraisīt koda atkārtošanos. Šajā rakstā ir aprakstītas metodes, kā pievienot CSS ar JavaScript.