Kako dodati CSS s JavaScriptom

Postoje različiti scenariji kada programeri trebaju stilizirati stranicu koristeći JavaScript. Na primjer, dinamičko mijenjanje stila elemenata tijekom interakcija korisnika, uključujući prikazivanje različitih animacija ili stilova u fokusu ili lebdenje na bilo kojem tekstu, i tako dalje. Za dinamički stil, korištenje CSS stila u JavaScriptu je učinkovitije. Omogućuje fleksibilan i dinamičan način upravljanja stilovima i čini aplikacije jednostavnijima za korištenje.

Ovaj će članak opisati metode za dodavanje CSS-a s JavaScriptom.

Kako dodati CSS s JavaScriptom?

U JavaScriptu možete dodati CSS stilove elementu mijenjanjem njegovog svojstva stila pomoću sljedećih metoda ili pristupa:

style Svojstvo kao ugrađeni stil
setAttribute() Metoda kao ugrađeni stil
createElement() Metoda kao globalni stil

Metoda 1: Dodajte CSS s JavaScriptom koristeći svojstvo 'style'.

Za dodavanje CSS-a u JavaScript, koristite ' stil ” vlasništvo. Koristi se za pristup i manipuliranje ugrađenim stilovima elementa. Daje objekt koji predstavlja ugrađene stilove elementa i omogućuje dobivanje ili postavljanje individualnih svojstava stila.

Sintaksa
Za dodavanje CSS stila u JavaScript, sljedeća sintaksa se koristi za ' stil ” svojstvo:

element. stil ;

Ovdje, ' element ” je referenca na HTML element.

Primjer
U sljedećem primjeru stilizirat ćemo gumbe pomoću JavaScripta. Prvo ćemo izraditi tri gumba i dodijeliti im ID-ove, što pomaže u pristupu elementima gumba za stiliziranje:

< id gumba = 'btn1' > Slažem se dugme >
< id gumba = 'btn2' > Odbiti dugme >
< id gumba = 'btn3' > Prihvatiti dugme >

Prije stiliziranja rezultat će izgledati ovako:

Sada stilizirajmo ove gumbe u JavaScriptu pomoću ' stil ” vlasništvo. Prvo, dohvatite sve elemente gumba pomoću njihovih dodijeljenih ID-ova uz pomoć ' getElementById() ” metoda:

neka se dogovorimo = dokument. getElementById ( 'btn1' ) ;
neka odbije = dokument. getElementById ( 'btn2' ) ;
neka prihvati = dokument. getElementById ( 'btn3' ) ;

Postavite boje pozadine svih ovih gumba pomoću ' stil ” svojstvo:

složiti se. stil . boja pozadine = 'zeleno' ;
odbiti. stil . boja pozadine = 'Crvena' ;
prihvatiti. stil . boja pozadine = 'žuta boja' ;

Kao što vidite, gumbi su uspješno stilizirani pomoću ' stil ” svojstvo:

Metoda 2: Dodajte CSS s JavaScriptom pomoću metode “setAttribute()”.

Za dodavanje CSS stila u JavaScript, koristite ' setAtribute() ” metoda. Koristi se za postavljanje ili dodavanje atributa i njegove vrijednosti HTML elementu.

Sintaksa
Sljedeća sintaksa koristi se za ' setAtribute() ” metoda:

element. setAtribute ( atribut , vrijednost ) ;

Primjer
Ovdje ćemo postaviti različite stilove na gumbe u JavaScriptu koristeći ' setAtribute() ” metoda. Postavite polumjer obruba svih gumba na ' .5rem ', i boja teksta za ' Slažem se ' i ' Odbiti ” gumbi za “ bijela ”.

složiti se. setAtribute ( 'stil' , 'boja-pozadine: zelena; boja: bijela; radijus obruba: .5rem;' ) ;
odbiti. setAtribute ( 'stil' , 'boja-pozadine: crvena; boja: bijela; radijus obruba: .5rem;' ) ;
prihvatiti. setAtribute ( 'stil' , 'boja-pozadine: žuta; radijus granice: .5rem;' ) ;

Izlaz

Metoda 3: Dodajte CSS s JavaScriptom pomoću metode “createElement()”.

Ako želite stvoriti klase ili ID-ove u JavaScript stilu kao u CSS stilu, koristite ' stvoritiElement() ” metoda. Koristi se za dinamičko stvaranje novog elementa. Za stiliziranje stvorite ' stil ” pomoću ove metode. ' createElement('style') ” metoda u JavaScriptu koristi se za dinamičko stvaranje novog stilskog elementa, koji se može koristiti za dodavanje CSS stilova na web stranicu.

Sintaksa
Dana sintaksa koristi se za ' stvoritiElement() ” metoda:

dokument. createElement ( elementType ) ;

Za dodavanje CSS stila u JavaScriptu koristite zadanu sintaksu:

konst stil = dokument. createElement ( 'stil' ) ;

Zatim dodajte element stila u oznaku head pomoću donje sintakse:

dokument. glava . dodatiDijete ( stil ) ;

Ovdje, ' stil ' je referenca na novostvoreni element stila, a ' dokument.glava ” je glavni element HTML dokumenta.

Primjer
Najprije izradite element stila pomoću ' stvoritiElement() ” metoda:

bio je stil = dokument. createElement ( 'stil' ) ;

Sada stvorite ' btn ” klasa za primjenu istog stila na sve gumbe i ID-ove “ btn1 ”, “ btn2 ' i ' btn3 ” za individualni stil gumba:

stil. unutarnjiHTML = `
. btn {
font - veličina : 1.1 rem ;
podstava : 3 px ;
margina : 2 px ;
font - obitelj : bez - serif ;
granica - radius : .5rem ;
}
#btn1 {
pozadina - boja : zelena ;
boja : bijela ;
}
#btn2 {
pozadina - boja : Crvena ;
boja : bijela ;
}
#btn3 {
pozadina - boja : žuta boja ;
}
` ;

Sada dodajte element stila u glavu dokumenta prosljeđivanjem kao parametra u ' dodatiDijete() ” metoda:

dokument. glava . dodatiDijete ( stil ) ;

Izlaz

To je sve o dodavanju CSS-a u JavaScript.

Zaključak

Za dodavanje CSS-a s JavaScriptom upotrijebite ugrađeni stil uključujući ' stil 'Imovina, i' setAtribute() ' ili globalni stil korištenjem ' stvoritiElement() ” metoda. Globalni stil je učinkovitiji, dok se inline metoda ne preporučuje jer otežava održavanje stilova primjene i može dovesti do ponavljanja koda. Ovaj članak opisuje metode za dodavanje CSS-a s JavaScriptom.

Kako dodati CSS s JavaScriptom