Ilalarawan ng artikulong ito ang mga paraan upang magdagdag ng CSS gamit ang JavaScript.
Paano Magdagdag ng CSS Gamit ang JavaScript?
Sa JavaScript, maaari kang magdagdag ng mga istilo ng CSS sa isang elemento sa pamamagitan ng pagbabago ng style property nito gamit ang mga sumusunod na pamamaraan o diskarte:
- style Property bilang inline na pag-istilo
- setAttribute() Paraan bilang inline na istilo
- createElement() Paraan bilang isang pandaigdigang istilo
Paraan 1: Magdagdag ng CSS Gamit ang JavaScript Gamit ang 'style' Property
Para sa pagdaragdag ng CSS sa JavaScript, gamitin ang “ istilo ” ari-arian. Ito ay ginagamit upang ma-access at manipulahin ang mga inline na istilo ng isang elemento. Nagbibigay ito ng isang bagay na kumakatawan sa mga inline na istilo ng isang elemento at nagbibigay-daan sa isa na makakuha o magtakda ng mga indibidwal na katangian ng istilo.
Syntax
Para sa pagdaragdag ng estilo ng CSS sa JavaScript, ang sumusunod na syntax ay ginagamit para sa ' istilo ” ari-arian:
elemento. istilo ;
Dito,' elemento ” ay isang sanggunian sa isang elemento ng HTML.
Halimbawa
Sa sumusunod na halimbawa, i-istilo namin ang mga button gamit ang JavaScript. Una, gagawa kami ng tatlong mga pindutan at magtatalaga ng mga id sa mga ito, na tumutulong upang ma-access ang mga elemento ng pindutan para sa pag-istilo:
< button id = 'btn2' > Tanggihan pindutan >
< button id = 'btn3' > Tanggapin pindutan >
Bago i-istilo ang output ay magiging ganito:
Ngayon, i-istilo natin ang mga button na ito sa JavaScript gamit ang ' istilo ” ari-arian. Una, kunin ang lahat ng mga elemento ng button gamit ang kanilang mga itinalagang id sa tulong ng “ getElementById() 'paraan:
hayaan mong sumang-ayon = dokumento. getElementById ( 'btn1' ) ;hayaan mong tanggihan = dokumento. getElementById ( 'btn2' ) ;
hayaan mong tanggapin = dokumento. getElementById ( 'btn3' ) ;
Itakda ang mga kulay ng background ng lahat ng mga button na ito gamit ang “ istilo ” ari-arian:
sumang-ayon. istilo . kulay ng background = 'berde' ;tanggihan. istilo . kulay ng background = 'pula' ;
tanggapin. istilo . kulay ng background = 'dilaw' ;
Tulad ng nakikita mo, ang mga pindutan ay matagumpay na na-istilo gamit ang ' istilo ” ari-arian:
Paraan 2: Magdagdag ng CSS Gamit ang JavaScript Gamit ang Paraang 'setAttribute()'.
Upang magdagdag ng CSS styling sa JavaScript, gamitin ang “ setAttribute() ” paraan. Ito ay ginagamit upang magtakda o magdagdag ng isang katangian at ang halaga nito sa isang elemento ng HTML.
Syntax
Ang sumusunod na syntax ay ginagamit para sa ' setAttribute() 'paraan:
Halimbawa
Dito, itatakda namin ang iba't ibang mga estilo sa mga pindutan sa JavaScript gamit ang ' setAttribute() ” paraan. Itakda ang border radius ng lahat ng mga button sa “ .5rem ”, at ang kulay ng teksto ng “ Sumang-ayon 'at' Tanggihan 'mga pindutan sa' puti ”.
tanggihan. setAttribute ( 'estilo' , 'kulay ng background: pula; kulay: puti; hangganan-radius: .5rem;' ) ;
tanggapin. setAttribute ( 'estilo' , 'kulay ng background: dilaw; border-radius: .5rem;' ) ;
Output
Paraan 3: Magdagdag ng CSS Gamit ang JavaScript Gamit ang Paraang 'createElement()'.
Kung gusto mong lumikha ng mga klase o id sa JavaScript styling tulad ng sa CSS styling, gamitin ang “ createElement() ” paraan. Ito ay ginagamit upang dynamic na lumikha ng isang bagong elemento. Para sa pag-istilo, lumikha ng ' istilo ” elemento gamit ang paraang ito. Ang ' createElement('style') ” paraan sa JavaScript ay ginagamit upang dynamic na lumikha ng isang bagong elemento ng estilo, na maaaring magamit upang magdagdag ng mga estilo ng CSS sa isang web page.
Syntax
Ang ibinigay na syntax ay ginagamit para sa ' createElement() 'paraan:
Para sa pagdaragdag ng estilo ng CSS sa JavaScript, gamitin ang ibinigay na syntax:
const istilo = dokumento. createElement ( 'estilo' ) ;Pagkatapos ay idagdag ang elemento ng istilo sa head tag gamit ang syntax sa ibaba:
dokumento. ulo . idagdagBata ( istilo ) ;Dito,' istilo ' ay isang sanggunian sa bagong likhang elemento ng istilo, at ' dokumento.ulo ” ay ang head element ng HTML na dokumento.
Halimbawa
Una, lumikha ng isang elemento ng istilo gamit ang ' createElement() 'paraan:
Ngayon, lumikha ng ' btn 'class para sa paglalapat ng parehong estilo sa lahat ng mga button at id' btn1 ”, “ btn2 'at' btn3 ” para sa indibidwal na pag-istilo ng button:
istilo. innerHTML = `. btn {
font - laki : 1.1rem ;
padding : 3px ;
margin : 2px ;
font - pamilya : walang - serif ;
hangganan - radius : .5rem ;
}
#btn1 {
background - kulay : berde ;
kulay : puti ;
}
#btn2 {
background - kulay : pula ;
kulay : puti ;
}
#btn3 {
background - kulay : dilaw ;
}
` ;
Ngayon, idagdag ang elemento ng estilo sa ulo ng dokumento sa pamamagitan ng pagpasa bilang isang parameter sa ' appendChild() 'paraan:
dokumento. ulo . idagdagBata ( istilo ) ; Output
Iyon ay tungkol sa pagdaragdag ng CSS sa JavaScript.
Konklusyon
Para sa pagdaragdag ng CSS na may JavaScript, gamitin ang inline na istilo kasama ang ' istilo ” Ari-arian, at “ setAttribute() ” paraan, o ang pandaigdigang istilo gamit ang “ createElement() ” paraan. Ang pandaigdigang istilo ay mas mahusay habang ang isang inline na paraan ay hindi inirerekomenda dahil ito ay nagpapahirap sa pagpapanatili ng mga estilo ng aplikasyon at maaaring humantong sa pag-uulit ng code. Inilarawan ng artikulong ito ang mga paraan upang magdagdag ng CSS gamit ang JavaScript.