Táto príručka vysvetlí postup pridávania aktívnej triedy v JavaScripte.
Ako pridať aktívnu triedu v JavaScripte?
Ak chcete pridať aktívnu triedu, použijeme nasledujúce metódy:
Poďme k prvej metóde!
Metóda 1: Použite document.getElementById() s metódou classList.add() na pridanie aktívnej triedy v JavaScripte
V JavaScripte je „ document.getElementById() ” metóda sa používa na prístup k určitému prvku pomocou jeho id. Vyberá však iba prvky na základe ich ID, nie tried. Môžete ho použiť s „ classList.add() ” metóda na pridanie aktívnej triedy v JavaScripte.
Poďme preskúmať túto metódu na príklade.
Príklad
V našom súbore HTML vezmeme „ ” tag s nejakým textom, uveďte jeho id ako “ TXT “ a pridajte „ po kliknutí “, ktorá spustí “ Aktivovať() “. Všimnite si, že pridajte značku
do značky
: < p id = 'TXT' po kliknutí = 'Aktivovať()' > Klepnite tu p >V súbore JavaScript definujte funkciu activate() tak, aby najprv pristupovala k prvku odseku pomocou jeho id v metóde document.getElementbyId(). Potom pridajte triedu CSS do jej zoznamu tried na účely úpravy štýlu:
funkciu aktivovať ( ) {
existuje a = dokument. getElementById ( 'TXT' ) ;
a. classList . pridať ( 'nová trieda' ) ;
}
V súbore CSS umiestnite bodku pred „ newclass “ a priraďte „ farba pozadia 'vlastnosť hodnota' oranžová “:
. newclass {pozadie - farba : oranžová ;
}
Výsledkom je, že keď kliknete na prvok odseku, použije sa naň pridaná vlastnosť pozadia:
Pozrime sa na nasledujúcu metódu, v ktorej použijeme document.querySelector() na pridanie aktívnej triedy.
Metóda 2: Použitie document.querySelector() s metódou classList.add() na pridanie aktívnej triedy v jazyku JavaScript
V JavaScripte je „ document.querySelector() ” metóda sa používa na získanie prvého prvku z kódu. V rámci metódy querySelector() môžete zadať triedy aj ID. Dá sa použiť s „ classList.add() ” metóda na pridanie aktívnej triedy v JavaScripte.
Príklad
Teraz budeme používať iba „ document.querySelector() “s ID” #TXT ” a vyberte prvok odseku. Metóda classList.add() sa opäť použije na pridanie aktívneho „ newclass “:
funkciu aktivovať ( ) {existuje a = dokument. querySelector ( '#TXT' ) ;
a. classList . pridať ( 'nová trieda' ) ;
}
Výkon
Naučili sme sa dve najjednoduchšie metódy na pridanie aktívnej triedy v JavaScripte
Záver
Ak chcete pridať aktívnu triedu, môžeme použiť „ getElementById() “ alebo „ querySelector() ” pomocou metódy classList.add(). Obe spomenuté metódy získajú prvky najskôr podľa ich id, potom pomocou metódy classList.add(), nového názvu triedy priradeného prvku, ktorý možno použiť na účely úpravy štýlu. Tento príspevok popisuje postup súvisiaci s pridaním aktívnej triedy v JavaScripte.