Ta članek opisuje metode dodajanja CSS z JavaScriptom.
Kako dodati CSS z JavaScriptom?
V JavaScriptu lahko dodate sloge CSS elementu tako, da spremenite njegovo lastnost sloga z uporabo naslednjih metod ali pristopov:
- Lastnost sloga kot slog v vrstici
- Metoda setAttribute() kot vgrajeni slog
- metoda createElement() kot globalni slog
1. način: dodajte CSS z JavaScriptom z uporabo lastnosti »style«.
Za dodajanje CSS v JavaScript uporabite » stil ” lastnina. Uporablja se za dostop in manipulacijo vgrajenih slogov elementa. Poda predmet, ki predstavlja vgrajene sloge elementa in omogoča pridobitev ali nastavitev posameznih lastnosti sloga.
Sintaksa
Za dodajanje sloga CSS v JavaScript se za » uporablja naslednja sintaksa stil ” Lastnost:
element. stil ;
Tukaj, ' element ” je sklic na element HTML.
Primer
V naslednjem primeru bomo gumbe oblikovali z uporabo JavaScripta. Najprej bomo ustvarili tri gumbe in jim dodelili ID-je, ki pomagajo pri dostopu do elementov gumbov za oblikovanje:
< ID gumba = 'btn2' > Zavrni gumb >
< ID gumba = 'btn3' > Sprejmi gumb >
Pred oblikovanjem sloga bo rezultat videti takole:
Zdaj pa oblikujmo te gumbe v JavaScript z uporabo ' stil ” lastnina. Najprej dobite vse elemente gumbov z uporabo njihovih dodeljenih ID-jev s pomočjo ' getElementById() ” metoda:
naj se strinjam = dokument. getElementById ( 'btn1' ) ;naj zavrnejo = dokument. getElementById ( 'btn2' ) ;
naj sprejme = dokument. getElementById ( 'btn3' ) ;
Nastavite barve ozadja vseh teh gumbov z uporabo ' stil ” Lastnost:
strinjam se. stil . Barva ozadja = 'zelena' ;zavrniti. stil . Barva ozadja = 'rdeča' ;
sprejeti. stil . Barva ozadja = 'rumena' ;
Kot lahko vidite, so bili gumbi uspešno oblikovani z uporabo ' stil ” Lastnost:
2. način: dodajte CSS z JavaScriptom z uporabo metode »setAttribute()«.
Če želite dodati slog CSS v JavaScript, uporabite » setAtribut() ” metoda. Uporablja se za nastavitev ali dodajanje atributa in njegove vrednosti elementu HTML.
Sintaksa
Naslednja sintaksa se uporablja za » setAtribut() ” metoda:
Primer
Tukaj bomo nastavili različne sloge na gumbih v JavaScriptu z uporabo ' setAtribut() ” metoda. Nastavite polmer obrobe vseh gumbov na ' .5rem «, in barvo besedila » Se strinjam « in » Zavrni » gumbi za » bela ”.
zavrniti. setAttribute ( 'slog' , 'barva-ozadje: rdeča; barva: bela; polmer obrobe: .5rem;' ) ;
sprejeti. setAttribute ( 'slog' , 'barva ozadja: rumena; polmer obrobe: .5rem;' ) ;
Izhod
3. način: dodajte CSS z JavaScriptom z uporabo metode »createElement()«.
Če želite ustvariti razrede ali ID-je v slogu JavaScript kot v slogu CSS, uporabite » createElement() ” metoda. Uporablja se za dinamično ustvarjanje novega elementa. Za oblikovanje ustvarite ' stil ” s to metodo. ' createElement('slog') ” metoda v JavaScriptu se uporablja za dinamično ustvarjanje novega slogovnega elementa, ki ga je mogoče uporabiti za dodajanje slogov CSS na spletno stran.
Sintaksa
Dana sintaksa se uporablja za » createElement() ” metoda:
Za dodajanje sloga CSS v JavaScript uporabite dano sintakso:
konst stil = dokument. createElement ( 'slog' ) ;Nato pripnite element sloga v oznaki head z uporabo spodnje sintakse:
dokument. glavo . appendChild ( stil ) ;Tukaj, ' stil « je sklic na novo ustvarjen stilski element in » dokument.glava ” je glavni element dokumenta HTML.
Primer
Najprej ustvarite slogovni element z uporabo ' createElement() ” metoda:
Zdaj ustvarite ' btn 'razred za uporabo istega sloga na vseh gumbih in ID-jih' btn1 ”, “ btn2 « in » btn3 ” za individualno oblikovanje gumbov:
stil. notranjiHTML = `. btn {
pisava - velikost : 1,1 rem ;
oblazinjenje : 3px ;
marža : 2 slikovnih pik ;
pisava - družina : brez - serif ;
meja - polmer : .5rem ;
}
#btn1 {
ozadje - barva : zelena ;
barva : bela ;
}
#btn2 {
ozadje - barva : rdeča ;
barva : bela ;
}
#btn3 {
ozadje - barva : rumena ;
}
` ;
Zdaj pripnite slogovni element v glavo dokumenta tako, da kot parameter podate v » appendChild() ” metoda:
dokument. glavo . appendChild ( stil ) ; Izhod
To je vse o dodajanju CSS v JavaScript.
Zaključek
Za dodajanje CSS z JavaScriptom uporabite vgrajeni slog, vključno z » stil ' Lastnina in ' setAtribut() « ali globalni slog z uporabo » createElement() ” metoda. Globalno oblikovanje je učinkovitejše, medtem ko vgrajena metoda ni priporočljiva, saj otežuje vzdrževanje slogov aplikacije in lahko vodi do ponavljanja kode. Ta članek opisuje metode za dodajanje CSS z JavaScriptom.