Tento článek popisuje metody přidání CSS pomocí JavaScriptu.
Jak přidat CSS pomocí JavaScriptu?
V JavaScriptu můžete do prvku přidat styly CSS úpravou jeho vlastnosti stylu pomocí následujících metod nebo přístupů:
- styl Vlastnost jako vložený styl
- setAttribute() Metoda jako vložený styl
- CreateElement() Method jako globální styl
Metoda 1: Přidejte CSS s JavaScriptem pomocí vlastnosti „style“.
Pro přidání CSS do JavaScriptu použijte „ styl ' vlastnictví. Používá se k přístupu a manipulaci s vloženými styly prvku. Poskytuje objekt, který představuje vložené styly prvku a umožňuje získat nebo nastavit vlastnosti jednotlivých stylů.
Syntax
Pro přidání stylu CSS do JavaScriptu se pro „ styl ' vlastnictví:
živel. styl ;
Tady, ' živel ” je odkaz na prvek HTML.
Příklad
V následujícím příkladu stylizujeme tlačítka pomocí JavaScriptu. Nejprve vytvoříme tři tlačítka a přiřadíme jim ID, což nám pomůže získat přístup k prvkům tlačítka pro stylování:
< ID tlačítka = 'btn2' > Odmítnout knoflík >
< ID tlačítka = 'btn3' > Akceptovat knoflík >
Před úpravou bude výstup vypadat takto:
Nyní upravme styl těchto tlačítek v JavaScriptu pomocí „ styl ' vlastnictví. Nejprve získejte všechny prvky tlačítka pomocí jejich přiřazených ID pomocí „ getElementById() “ metoda:
nechme souhlasit = dokument. getElementById ( 'btn1' ) ;nechat odmítnout = dokument. getElementById ( 'btn2' ) ;
nechat přijmout = dokument. getElementById ( 'btn3' ) ;
Nastavte barvy pozadí všech těchto tlačítek pomocí „ styl ' vlastnictví:
souhlasit. styl . barva pozadí = 'zelená' ;odmítnout. styl . barva pozadí = 'Červené' ;
akceptovat. styl . barva pozadí = 'žlutá' ;
Jak můžete vidět, tlačítka byla úspěšně stylizována pomocí „ styl ' vlastnictví:
Metoda 2: Přidání CSS s JavaScriptem pomocí metody „setAttribute()“.
Chcete-li přidat styl CSS do JavaScriptu, použijte „ setAttribute() “ metoda. Používá se k nastavení nebo přidání atributu a jeho hodnoty do prvku HTML.
Syntax
Následující syntaxe se používá pro „ setAttribute() “ metoda:
Příklad
Zde nastavíme různé styly tlačítek v JavaScriptu pomocí „ setAttribute() “ metoda. Nastavte poloměr ohraničení všech tlačítek na „ .5rem “ a barvu textu „ Souhlasit ' a ' Odmítnout “tlačítka na “ bílý “.
odmítnout. setAttribute ( 'styl' , 'barva pozadí: červená; barva: bílá; poloměr okraje: .5rem;' ) ;
akceptovat. setAttribute ( 'styl' , 'barva pozadí: žlutá; poloměr okraje: .5rem;' ) ;
Výstup
Metoda 3: Přidání CSS pomocí JavaScriptu pomocí metody „createElement()“.
Pokud chcete vytvořit třídy nebo ID ve stylu JavaScriptu jako ve stylu CSS, použijte „ createElement() “ metoda. Používá se k dynamickému vytváření nového prvku. Pro styling vytvořte „ styl ” pomocí této metody. ' createElement('styl') ” metoda v JavaScriptu se používá k dynamickému vytvoření nového prvku stylu, který lze použít k přidání stylů CSS na webovou stránku.
Syntax
Daná syntaxe se používá pro „ createElement() “ metoda:
Pro přidání stylu CSS do JavaScriptu použijte danou syntaxi:
konst styl = dokument. createElement ( 'styl' ) ;Poté přidejte prvek stylu do značky head pomocí níže uvedené syntaxe:
dokument. hlava . appendChild ( styl ) ;Tady, ' styl “ je odkaz na nově vytvořený prvek stylu a „ dokument.hlava ” je element head dokumentu HTML.
Příklad
Nejprve vytvořte prvek stylu pomocí „ createElement() “ metoda:
Nyní vytvořte „ btn “třída pro použití stejného stylu na všechna tlačítka a ID” btn1 “, “ btn2 ' a ' btn3 ” pro individuální styling tlačítek:
styl. vnitřní HTML = '. btn {
písmo - velikost : 1.1rem ;
vycpávka : 3px ;
okraj : 2px ;
písmo - rodina : bez - patka ;
okraj - poloměr : .5rem ;
}
#btn1 {
Pozadí - barva : zelená ;
barva : bílý ;
}
#btn2 {
Pozadí - barva : Červené ;
barva : bílý ;
}
#btn3 {
Pozadí - barva : žlutá ;
}
' ;
Nyní přidejte prvek stylu do záhlaví dokumentu předáním jako parametr do „ appendChild() “ metoda:
dokument. hlava . appendChild ( styl ) ; Výstup
To je vše o přidávání CSS do JavaScriptu.
Závěr
Pro přidání CSS s JavaScriptem použijte inline styling včetně „ styl „Majetek“ a „ setAttribute() “ nebo globální styl pomocí “ createElement() “ metoda. Globální styl je efektivnější, zatímco inline metoda se nedoporučuje, protože ztěžuje udržování stylů aplikace a může vést k opakování kódu. Tento článek popisuje metody přidání CSS pomocí JavaScriptu.