Tato příručka vysvětlí postup přidání aktivní třídy v JavaScriptu.
Jak přidat aktivní třídu v JavaScriptu?
Chcete-li přidat aktivní třídu, použijeme následující metody:
Pojďme k první metodě!
Metoda 1: Použití document.getElementById() s metodou classList.add() k přidání aktivní třídy v JavaScriptu
V JavaScriptu „ document.getElementById() ” metoda se používá pro přístup k určitému prvku pomocí jeho id. Vybírá však pouze prvky na základě jejich ID, nikoli tříd. Můžete jej použít s „ classList.add() ” metoda pro přidání aktivní třídy v JavaScriptu.
Pojďme si tuto metodu prozkoumat na příkladu.
Příklad
V našem HTML souboru vezmeme „ ” tag s nějakým textem, určete jeho id jako “ txt “ a přidejte „ při kliknutí ” událost, která spustí “ aktivovat() funkce “. Všimněte si, že přidejte značku
do značky
: < p id = 'txt' při kliknutí = 'aktivovat()' > Klepněte sem p >V souboru JavaScript definujte funkci activate() tak, aby nejprve přistupovala k prvku odstavce pomocí svého id v metodě document.getElementbyId(). Poté přidejte třídu CSS do jejího seznamu tříd pro účely stylování:
funkci aktivovat ( ) {
tady je = dokument. getElementById ( 'txt' ) ;
A. classList . přidat ( 'nová třída' ) ;
}
V souboru CSS umístěte tečku před „ nová třída “ a přiřadit „ barva pozadí 'vlastnost hodnota' oranžový “:
. nová třída {Pozadí - barva : oranžový ;
}
V důsledku toho, když kliknete na prvek odstavce, použije se na něj přidaná vlastnost pozadí:
Podívejme se na následující metodu, ve které použijeme document.querySelector() k přidání aktivní třídy.
Metoda 2: Použití document.querySelector() s metodou classList.add() k přidání aktivní třídy v JavaScriptu
V JavaScriptu „ document.querySelector() ” metoda se používá k získání prvního prvku z kódu. V metodě querySelector() můžete zadat třídy i ID. Lze jej použít s „ classList.add() ” metoda pro přidání aktivní třídy v JavaScriptu.
Příklad
Nyní budeme používat pouze „ document.querySelector() “s id” #txt ” pro výběr prvku odstavce. Metoda classList.add() bude opět použita k přidání aktivního „ nová třída “:
funkci aktivovat ( ) {tady je = dokument. querySelector ( '#txt' ) ;
A. classList . přidat ( 'nová třída' ) ;
}
Výstup
Naučili jsme se dvě nejjednodušší metody pro přidání aktivní třídy v JavaScriptu
Závěr
Chcete-li přidat aktivní třídu, můžeme použít „ getElementById() “ nebo „ querySelector() ” pomocí metody classList.add(). Obě zmíněné metody získají prvky nejprve podle jejich id, poté pomocí metody classList.add() , nového názvu třídy přiřazeného prvku, který lze použít pro účely stylování. Tento příspěvek popsal postup související s přidáním aktivní třídy v JavaScriptu.