Ez a kézikönyv elmagyarázza az aktív osztályok JavaScriptben való hozzáadásának folyamatát.
Hogyan adjunk hozzá aktív osztályt a JavaScript-hez?
Aktív osztály hozzáadásához a következő módszereket fogjuk használni:
Térjünk át az első módszerre!
1. módszer: Használja a document.getElementById() metódust a classList.add() módszerrel az aktív osztály hozzáadásához JavaScriptben
A JavaScriptben a „ document.getElementById() ” metódus egy bizonyos elem eléréséhez az azonosítójával történik. Az elemeket azonban csak az azonosítójuk alapján választja ki, az osztályokat nem. Használhatja a „ classList.add() ” módszer egy aktív osztály hozzáadásához JavaScriptben.
Vizsgáljuk meg ezt a módszert egy példa segítségével.
Példa
A HTML fájlunkban a „ ' címke valamilyen szöveggel, adja meg az azonosítóját ' txt ”, és adjunk hozzá egy „ kattintásra ' esemény, amely elindítja a ' aktiválja() ” funkciót. Vegye figyelembe, hogy adja hozzá a
címkét a
címkén belül: < p id = 'txt' kattintásra = 'aktiválja()' > Érintsd meg itt p >A JavaScript fájlban határozza meg az activate() függvényt úgy, hogy az először a bekezdéselemhez férjen hozzá a document.getElementbyId() metódus azonosítójával. Ezután adjon hozzá egy CSS-osztályt az osztálylistájához stílusozási célból:
funkció aktiválása ( ) {
van egy = dokumentum. getElementById ( 'txt' ) ;
a. osztálylista . add hozzá ( 'új osztály' ) ;
}
A CSS-fájlban tegyen egy pontot a „ új osztály ” és rendelje hozzá a „ háttérszín 'tulajdon érték' narancssárga ”:
. új osztály {háttér - szín : narancssárga ;
}
Ennek eredményeként, amikor rákattint a bekezdéselemre, a hozzáadott háttértulajdonság érvényesül rá:
Vessünk egy pillantást a következő módszerre, amelyben a document.querySelector() függvényt használjuk egy aktív osztály hozzáadásához.
2. módszer: A document.querySelector() használata a classList.add() módszerrel aktív osztály hozzáadásához JavaScriptben
A JavaScriptben a „ document.querySelector() ” módszert használjuk a kód első elemének kinyerésére. Osztályokat és azonosítókat is megadhat a querySelector() metóduson belül. Használható a ' classList.add() ” módszer egy aktív osztály hozzáadásához JavaScriptben.
Példa
Most csak a „ document.querySelector() 'azonosítóval' #txt ” a bekezdéselem kiválasztásához. Ismét a classList.add() metódust fogja használni az aktív ' új osztály ”:
funkció aktiválása ( ) {van egy = dokumentum. querySelector ( '#txt' ) ;
a. osztálylista . add hozzá ( 'új osztály' ) ;
}
Kimenet
Megtanultunk két legegyszerűbb módszert az aktív osztály hozzáadására JavaScriptben
Következtetés
Aktív osztály hozzáadásához használhatjuk a „ getElementById() ” vagy „ querySelector() ” a classList.add() metódussal. Mindkét említett metódus először az azonosítójuk alapján kapja meg az elemeket, majd a classList.add() metódussal, az elemhez rendelt új osztálynévvel, amelyet stílusozási célokra használhatunk. Ez a bejegyzés leírja az aktív osztály JavaScriptben való hozzáadásával kapcsolatos eljárást.