Tento článok popisuje metódy pridávania CSS pomocou JavaScriptu.
Ako pridať CSS pomocou JavaScriptu?
V JavaScripte môžete do prvku pridať štýly CSS úpravou jeho vlastnosti štýlu pomocou nasledujúcich metód alebo prístupov:
- štýl Vlastnosť ako vložený štýl
- setAttribute() Metóda ako vložený štýl
- CreateElement() Method ako globálny štýl
Metóda 1: Pridajte CSS pomocou JavaScriptu pomocou vlastnosti „style“.
Na pridanie CSS do JavaScriptu použite „ štýl ' nehnuteľnosť. Používa sa na prístup a manipuláciu s vloženými štýlmi prvku. Poskytuje objekt, ktorý predstavuje vložené štýly prvku a umožňuje získať alebo nastaviť vlastnosti jednotlivých štýlov.
Syntax
Na pridanie štýlu CSS do JavaScriptu sa používa nasledujúca syntax pre „ štýl ' nehnuteľnosť:
element. štýl ;
Tu, ' element “ je odkaz na prvok HTML.
Príklad
V nasledujúcom príklade upravíme štýl tlačidiel pomocou JavaScriptu. Najprv vytvoríme tri tlačidlá a priradíme im ID, čo nám pomôže získať prístup k prvkom tlačidiel na úpravu štýlu:
< ID tlačidla = 'btn2' > Odmietnuť tlačidlo >
< ID tlačidla = 'btn3' > súhlasiť tlačidlo >
Pred úpravou bude výstup vyzerať takto:
Teraz upravme štýl týchto tlačidiel v JavaScripte pomocou „ štýl ' nehnuteľnosť. Najprv získajte všetky prvky tlačidiel pomocou ich priradených ID pomocou „ getElementById() “ metóda:
nech sa dohodne = dokument. getElementById ( 'btn1' ) ;nechať odmietnuť = dokument. getElementById ( 'btn2' ) ;
nechať prijať = dokument. getElementById ( 'btn3' ) ;
Nastavte farby pozadia všetkých týchto tlačidiel pomocou „ štýl ' nehnuteľnosť:
súhlasiť. štýl . farba pozadia = 'zelená' ;odmietnuť. štýl . farba pozadia = 'červená' ;
súhlasiť. štýl . farba pozadia = 'žltá' ;
Ako môžete vidieť, tlačidlá boli úspešne štylizované pomocou „ štýl ' nehnuteľnosť:
Metóda 2: Pridanie CSS pomocou JavaScriptu pomocou metódy „setAttribute()“.
Ak chcete do JavaScriptu pridať štýl CSS, použite „ setAttribute() “. Používa sa na nastavenie alebo pridanie atribútu a jeho hodnoty do prvku HTML.
Syntax
Nasledujúca syntax sa používa pre „ setAttribute() “ metóda:
Príklad
Tu nastavíme rôzne štýly tlačidiel v JavaScripte pomocou „ setAttribute() “. Nastavte polomer okraja všetkých tlačidiel na „ .5rem “ a farba textu v poli „ Súhlasím “ a „ Odmietnuť tlačidlami “ biely “.
odmietnuť. setAttribute ( 'štýl' , 'farba pozadia: červená; farba: biela; polomer okraja: .5rem;' ) ;
súhlasiť. setAttribute ( 'štýl' , 'farba pozadia: žltá; polomer okraja: .5rem;' ) ;
Výkon
Metóda 3: Pridanie CSS pomocou JavaScriptu pomocou metódy „createElement()“.
Ak chcete vytvoriť triedy alebo identifikátory v štýle JavaScript ako v štýle CSS, použite „ createElement() “. Používa sa na dynamické vytváranie nového prvku. Pre styling vytvorte „ štýl pomocou tejto metódy. ' createElement('štýl') ” metóda v JavaScripte sa používa na dynamické vytvorenie nového prvku štýlu, ktorý možno použiť na pridanie štýlov CSS na webovú stránku.
Syntax
Daná syntax sa používa pre „ createElement() “ metóda:
Na pridanie štýlu CSS do JavaScriptu použite danú syntax:
konšt štýl = dokument. createElement ( 'štýl' ) ;Potom pridajte prvok štýlu do značky head pomocou nižšie uvedenej syntaxe:
dokument. hlavu . appendChild ( štýl ) ;Tu, ' štýl “ je odkaz na novovytvorený prvok štýlu a „ dokument.hlava ” je hlavná časť dokumentu HTML.
Príklad
Najprv vytvorte prvok štýlu pomocou „ createElement() “ metóda:
Teraz vytvorte „ btn “trieda pre použitie rovnakého štýlu na všetky tlačidlá a identifikátory” btn1 “, “ btn2 “ a „ btn3 ” pre individuálny štýl tlačidiel:
štýl. innerHTML = `. btn {
písmo - veľkosť : 1,1 rem ;
vypchávka : 3px ;
marža : 2px ;
písmo - rodina : bez - serif ;
hranica - polomer : .5rem ;
}
#btn1 {
pozadie - farba : zelená ;
farba : biely ;
}
#btn2 {
pozadie - farba : červená ;
farba : biely ;
}
#btn3 {
pozadie - farba : žltá ;
}
` ;
Teraz pridajte prvok štýlu do hlavičky dokumentu odovzdaním ako parametra do „ appendChild() “ metóda:
dokument. hlavu . appendChild ( štýl ) ; Výkon
To je všetko o pridávaní CSS do JavaScriptu.
Záver
Na pridanie CSS s JavaScriptom použite vložený štýl vrátane „ štýl „Nehnuteľnosť“ a „ setAttribute() “ alebo globálny štýl pomocou “ createElement() “. Globálny štýl je efektívnejší, zatiaľ čo inline metóda sa neodporúča, pretože sťažuje udržiavanie štýlov aplikácie a môže viesť k opakovaniu kódu. Tento článok popisuje metódy pridávania CSS pomocou JavaScriptu.