Kuidas lisada JavaScriptiga CSS-i

On erinevaid stsenaariume, kui programmeerijad peavad lehe stiili muutma JavaScripti abil. Näiteks elementide stiili dünaamiline muutmine kasutaja interaktsioonidel, sealhulgas erinevate animatsioonide või stiilide kuvamine fookuses või mis tahes teksti peal hõljutamine ja nii edasi. Dünaamilise stiili jaoks on JavaScriptis CSS-stiili kasutamine tõhusam. See pakub paindlikku ja dünaamilist viisi stiilide haldamiseks ja rakenduste kasutajasõbralikumaks muutmiseks.

Selles artiklis kirjeldatakse JavaScriptiga CSS-i lisamise meetodeid.

Kuidas lisada JavaScriptiga CSS-i?

JavaScriptis saate elemendile lisada CSS-stiile, muutes selle stiili atribuuti järgmiste meetodite või lähenemisviisidega.

stiil Omadus sisemise stiilina
setAttribute() Meetod tekstisisese stiilina
CreateElement() meetod globaalse stiilina

1. meetod: lisage JavaScriptiga CSS, kasutades atribuuti 'style'.

JavaScripti CSS-i lisamiseks kasutage ' stiilis ” vara. Seda kasutatakse elemendi sisestele stiilidele juurdepääsuks ja nendega manipuleerimiseks. See annab objekti, mis esindab elemendi siseseid stiile ja võimaldab hankida või määrata individuaalseid stiiliomadusi.

Süntaks
JavaScripti CSS-stiili lisamiseks kasutatakse '' jaoks järgmist süntaksit stiilis ” vara:

element. stiilis ;

Siin, ' element ” on viide HTML-elemendile.

Näide
Järgmises näites kujundame nupud JavaScripti abil. Esiteks loome kolm nuppu ja määrame neile ID-d, mis aitavad stiilimisel nupuelementidele juurde pääseda:

< nupu id = 'btn1' > Nõus nuppu >
< nupu id = 'btn2' > Keeldu nuppu >
< nupu id = 'btn3' > Nõustu nuppu >

Enne stiili kujundamist näeb väljund välja järgmine:

Nüüd muutkem need nupud JavaScriptis stiiliks, kasutades ' stiilis ” vara. Esiteks hankige kõik nupuelemendid, kasutades neile määratud ID-sid, kasutades ' getElementById() ” meetod:

lepime kokku = dokument. getElementById ( 'btn1' ) ;
lase tagasi lükata = dokument. getElementById ( 'btn2' ) ;
lase vastu võtta = dokument. getElementById ( 'btn3' ) ;

Määrake kõigi nende nuppude taustavärvid, kasutades ' stiilis ” vara:

nõus. stiilis . taustavärv = 'roheline' ;
tagasi lükata. stiilis . taustavärv = 'punane' ;
aktsepteerima. stiilis . taustavärv = 'kollane' ;

Nagu näete, on nupud edukalt kujundatud, kasutades ' stiilis ” vara:

2. meetod: lisage JavaScriptiga CSS, kasutades meetodit „setAttribute()”.

JavaScriptis CSS-stiili lisamiseks kasutage ' setAttribute() ” meetod. Seda kasutatakse atribuudi ja selle väärtuse määramiseks või lisamiseks HTML-elemendile.

Süntaks
'' jaoks kasutatakse järgmist süntaksit setAttribute() ” meetod:

element. setAttribute ( atribuut , väärtus ) ;

Näide
Siin määrame JavaScripti nuppude erinevad stiilid, kasutades ' setAttribute() ” meetod. Määra kõigi nuppude ääriste raadius ' .5rem ja teksti värvi ' Nõus ” ja „ Keeldu ' nupud kuni ' valge ”.

nõus. setAttribute ( 'stiil' , 'taustavärv: roheline; värvus: valge; äärise raadius: .5rem;' ) ;
tagasi lükata. setAttribute ( 'stiil' , 'taustavärv: punane; värv: valge; äärise raadius: .5rem;' ) ;
aktsepteerima. setAttribute ( 'stiil' , 'taustavärv: kollane; äärise raadius: .5rem;' ) ;

Väljund

3. meetod: lisage JavaScriptiga CSS, kasutades meetodit 'createElement()'.

Kui soovite luua klasse või ID-sid JavaScripti stiilis nagu CSS-stiilis, kasutage ' looElement() ” meetod. Seda kasutatakse uue elemendi dünaamiliseks loomiseks. Stiili kujundamiseks looge ' stiilis ” elementi, kasutades seda meetodit. ' createElement('stiil') ” meetodit JavaScriptis kasutatakse uue stiilielemendi dünaamiliseks loomiseks, mille abil saab veebilehele CSS-i stiile lisada.

Süntaks
Antud süntaksit kasutatakse ' looElement() ” meetod:

dokument. looElement ( elemendi tüüp ) ;

JavaScripti CSS-stiili lisamiseks kasutage antud süntaksit:

konst stiilis = dokument. looElement ( 'stiil' ) ;

Seejärel lisage stiilielement peamärgendisse, kasutades allolevat süntaksit:

dokument. pea . lisalaps ( stiilis ) ;

Siin, ' stiilis ” on viide vastloodud stiilielemendile ja „ dokument.pea ” on HTML-dokumendi peaelement.

Näide
Esmalt looge stiilielement, kasutades ' looElement() ” meetod:

oli stiilis = dokument. looElement ( 'stiil' ) ;

Nüüd looge ' btn ' klass sama stiili rakendamiseks kõikidele nuppudele ja ID-dele ' btn1 ”, „ btn2 ” ja „ btn3 ” individuaalse nupu stiili jaoks:

stiilis. sisemine HTML = `
. btn {
font - suurus : 1,1 rem ;
polsterdus : 3 pikslit ;
marginaal : 2 pikslit ;
font - perekond : ilma - serif ;
piir - raadius : .5rem ;
}
#btn1 {
taustal - värvi : roheline ;
värvi : valge ;
}
#btn2 {
taustal - värvi : punane ;
värvi : valge ;
}
#btn3 {
taustal - värvi : kollane ;
}
` ;

Nüüd lisage stiilielement dokumendi päisesse, edastades parameetrina ' appendChild() ” meetod:

dokument. pea . lisalaps ( stiilis ) ;

Väljund

See kõik puudutab CSS-i lisamist JavaScripti.

Järeldus

JavaScriptiga CSS-i lisamiseks kasutage tekstisisest stiili, sealhulgas ' stiilis 'Kinnisvara ja' setAttribute() ” meetodit või globaalset stiili kasutades „ looElement() ” meetod. Globaalne stiil on tõhusam, samas kui tekstisisene meetod pole soovitatav, kuna see raskendab rakendusstiilide säilitamist ja võib põhjustada koodi kordumist. Selles artiklis kirjeldati JavaScriptiga CSS-i lisamise meetodeid.

Kuidas lisada JavaScriptiga CSS-i