Ez a cikk leírja a CSS JavaScript használatával történő hozzáadásának módszereit.
Hogyan lehet CSS-t hozzáadni JavaScripttel?
A JavaScriptben CSS-stílusokat adhat hozzá egy elemhez a stílustulajdonság módosításával a következő módszerekkel vagy megközelítésekkel:
- style Tulajdonság beépített stílusként
- setAttribute() Metódus soron belüli stílusként
- createElement() metódus globális stílusként
1. módszer: CSS hozzáadása JavaScripttel a „style” tulajdonság használatával
CSS hozzáadásához JavaScriptben használja a ' stílus ' ingatlan. Egy elem belső stílusainak eléréséhez és manipulálásához használható. Olyan objektumot ad, amely egy elem soron belüli stílusait reprezentálja, és lehetővé teszi az egyéni stílustulajdonságok lekérését vagy beállítását.
Szintaxis
CSS-stílus hozzáadásához JavaScriptben a következő szintaxist használják a ' stílus ' ingatlan:
elem. stílus ;
Itt, ' elem ” egy HTML-elemre való hivatkozás.
Példa
A következő példában a gombokat JavaScript használatával fogjuk stílusozni. Először három gombot hozunk létre, és azonosítót rendelünk hozzájuk, ami segít elérni a gombelemeket a stílushoz:
< gomb id = 'btn2' > Elutasít gomb >
< gomb id = 'btn3' > Elfogad gomb >
A formázás előtt a kimenet így fog kinézni:
Most stílusozzuk ezeket a gombokat JavaScriptben a „ stílus ' ingatlan. Először szerezze be az összes gombelemet a hozzárendelt azonosítókkal a „ getElementById() ” módszer:
egyezzünk meg = dokumentum. getElementById ( 'btn1' ) ;hagyjuk elutasítani = dokumentum. getElementById ( 'btn2' ) ;
fogadjuk el = dokumentum. getElementById ( 'btn3' ) ;
Állítsa be az összes gomb háttérszínét a „ stílus ' ingatlan:
egyetért. stílus . háttérszín = 'zöld' ;elutasít. stílus . háttérszín = 'piros' ;
elfogad. stílus . háttérszín = 'sárga' ;
Amint láthatja, a gombok stílusa sikeresen megtörtént a „ stílus ' ingatlan:
2. módszer: CSS hozzáadása JavaScripttel a „setAttribute()” módszerrel
CSS-stílus hozzáadásához JavaScriptben használja a „ setAttribute() ” módszerrel. Egy attribútum és annak értékének beállítására vagy hozzáadására szolgál egy HTML-elemhez.
Szintaxis
A következő szintaxist használják a ' setAttribute() ” módszer:
Példa
Itt beállítjuk a JavaScript gombjainak különböző stílusait a „ setAttribute() ” módszerrel. Állítsa az összes gomb szegély sugarát '' .5rem ”, és a „ Egyetért ” és „ Elutasít ' gombokat a ' fehér ”.
elutasít. setAttribute ( 'stílus' , 'háttérszín: piros; szín: fehér; szegélysugár: .5 rem;' ) ;
elfogad. setAttribute ( 'stílus' , 'háttérszín: sárga; szegélysugár: .5rem;' ) ;
Kimenet
3. módszer: CSS hozzáadása JavaScripttel a „createElement()” módszerrel
Ha osztályokat vagy azonosítókat szeretne létrehozni JavaScript stílusban, mint a CSS stílusban, használja a ' createElement() ” módszerrel. Új elem dinamikus létrehozására szolgál. A stílushoz hozzon létre egy „ stílus ” elemet ezzel a módszerrel. A ' createElement('stílus') ” metódus a JavaScriptben egy új stíluselem dinamikus létrehozására szolgál, amellyel CSS-stílusokat adhatunk egy weboldalhoz.
Szintaxis
A megadott szintaxis a „ createElement() ” módszer:
CSS-stílus hozzáadásához JavaScriptben használja a megadott szintaxist:
const stílus = dokumentum. CreateElement ( 'stílus' ) ;Ezután fűzze hozzá a stíluselemet a head címkéhez az alábbi szintaxis használatával:
dokumentum. fej . appendChild ( stílus ) ;Itt, ' stílus ' hivatkozás az újonnan létrehozott stíluselemre, és ' dokumentum.fej ” a HTML dokumentum fejeleme.
Példa
Először hozzon létre egy stíluselemet a ' createElement() ” módszer:
Most hozzon létre egy ' btn ' osztály azonos stílus alkalmazásához minden gombon és azonosítón ' btn1 ”, „ btn2 ” és „ btn3 ” az egyéni gombstílushoz:
stílus. innerHTML = `. btn {
betűtípus - méret : 1.1 rem ;
párnázás : 3 képpont ;
árrés : 2px ;
betűtípus - család : nélkül - serif ;
határ - sugár : .5rem ;
}
#btn1 {
háttér - szín : zöld ;
szín : fehér ;
}
#btn2 {
háttér - szín : piros ;
szín : fehér ;
}
#btn3 {
háttér - szín : sárga ;
}
` ;
Most fűzze hozzá a stíluselemet a dokumentum fejéhez úgy, hogy paraméterként adja át a ' appendChild() ” módszer:
dokumentum. fej . appendChild ( stílus ) ; Kimenet
Ez minden a CSS hozzáadásával kapcsolatos JavaScriptben.
Következtetés
CSS hozzáadásához JavaScripttel, használja a belső stílust, beleértve a ' stílus ' Ingatlan és ' setAttribute() ” módszerrel, vagy a globális stílust a „ createElement() ” módszerrel. A globális stílusozás hatékonyabb, míg a soron belüli módszer nem ajánlott, mivel megnehezíti az alkalmazási stílusok karbantartását, és kódismétléshez vezethet. Ez a cikk a CSS JavaScript-szel való hozzáadásának módszereit ismerteti.