See juhend selgitab JavaScripti aktiivse klassi lisamise protseduuri.
Kuidas JavaScripti aktiivset klassi lisada?
Aktiivse klassi lisamiseks kasutame järgmisi meetodeid:
Liigume esimese meetodi juurde!
1. meetod: JavaScripti aktiivse klassi lisamiseks kasutage meetodit document.getElementById() koos classList.add()
JavaScriptis on ' document.getElementById() ” meetodit kasutatakse teatud elemendile juurdepääsuks selle ID järgi. Kuid see valib elemendid ainult nende ID-de, mitte klasside alusel. Saate seda kasutada koos ' classList.add() ” meetod JavaScripti aktiivse klassi lisamiseks.
Uurime seda meetodit näite varal.
Näide
HTML-failis võtame ' ” märgend mõne tekstiga, määrake selle ID kui ' txt ja lisage ' onclick sündmus, mis käivitab aktiveeri () ” funktsioon. Pange tähele, et lisage märgend
märgendisse
: < p id = 'txt' onclick = 'Active()' > Puudutage siin lk >Määrake JavaScripti failis funktsioon activate() nii, et see pääseks esmalt juurde lõigu elemendile, kasutades oma ID-d meetodis document.getElementbyId(). Seejärel lisage stiili eesmärgil oma klasside loendisse CSS-klass:
funktsioon aktiveerida ( ) {
Siin on = dokument. getElementById ( 'txt' ) ;
a. klassiloend . lisama ( 'uus klass' ) ;
}
Asetage CSS-failis punkt enne ' uus klass ” ja määrake „ taustavärv 'vara väärtus' oranž ”:
. uus klass {taustal - värvi : oranž ;
}
Selle tulemusel rakendatakse lõigu elemendil klõpsamisel sellele lisatud taustaomadus:
Vaatame järgmist meetodit, mille puhul kasutame aktiivse klassi lisamiseks faili document.querySelector().
2. meetod: JavaScripti aktiivse klassi lisamiseks kasutage meetodit document.querySelector() koos classList.add()
JavaScriptis on ' document.querySelector() ” meetodit kasutatakse koodist esimese elemendi hankimiseks. Meetodis querySelector() saate määrata klasse ja ID-sid. Seda saab kasutada koos ' classList.add() ” meetod JavaScripti aktiivse klassi lisamiseks.
Näide
Nüüd kasutame ainult ' document.querySelector() 'ID-ga' #txt ” lõigu elemendi valimiseks. Jällegi kasutatakse aktiivse '' lisamiseks meetodit classList.add(). uus klass ”:
funktsioon aktiveerida ( ) {Siin on = dokument. querySelector ( '#txt' ) ;
a. klassiloend . lisama ( 'uus klass' ) ;
}
Väljund
Oleme õppinud JavaScripti aktiivse klassi lisamiseks kahte lihtsaimat meetodit
Järeldus
Aktiivse klassi lisamiseks saame kasutada ' getElementById() ” või „ querySelector() ” meetodiga classList.add(). Mõlemad mainitud meetodid saavad elemendid esmalt nende id järgi, seejärel meetodi classList.add() abil, mis on elemendile määratud uus klassinimi, mida saab kasutada stiilide kujundamisel. See postitus on kirjeldanud JavaScripti aktiivse klassi lisamisega seotud protseduuri.