Šiame vadove bus paaiškinta aktyvios klasės įtraukimo į „JavaScript“ procedūra.
Kaip pridėti aktyvią klasę „JavaScript“?
Norėdami pridėti aktyvią klasę, naudosime šiuos metodus:
Pereikime prie pirmojo metodo!
1 būdas: naudokite document.getElementById() su classList.add() metodu, kad įtrauktumėte aktyvią klasę į „JavaScript“
„JavaScript“ programoje „ document.getElementById() “ metodas naudojamas norint pasiekti tam tikrą elementą pagal jo ID. Tačiau jis pasirenka tik elementus pagal jų ID, o ne klases. Galite naudoti su ' classList.add() “ metodas, skirtas įtraukti aktyvią klasę „JavaScript“.
Išnagrinėkime šį metodą pateikdami pavyzdį.
Pavyzdys
Savo HTML faile paimsime „ “ žymą su tekstu, nurodykite jo ID kaip „ txt “ ir pridėkite „ paspaudus įvykis, kuris suaktyvins aktyvuoti () ' funkcija. Atminkite, kad žymą
pridėkite prie
žymos: < p id = 'txt' paspaudus = 'aktyvuoti ()' > Bakstelėkite čia p >„JavaScript“ faile apibrėžkite funkciją activate() taip, kad ji pirmiausia pasiektų pastraipos elementą naudodama savo ID metodu document.getElementbyId(). Tada pridėkite CSS klasę į savo klasių sąrašą, kad sukurtumėte stilių:
funkcija aktyvuoti ( ) {
čia yra = dokumentas. getElementById ( 'txt' ) ;
a. klasių sąrašas . papildyti ( 'nauja klasė' ) ;
}
CSS faile įdėkite tašką prieš „ nauja klasė “ ir priskirkite „ fono spalva 'turtas yra vertė' oranžinė “:
. nauja klasė {fone - spalva : oranžinė ;
}
Dėl to, kai spustelėsite pastraipos elementą, jam bus pritaikyta pridėta fono ypatybė:
Pažvelkime į šį metodą, kuriame naudosime document.querySelector(), kad pridėtume aktyvią klasę.
2 būdas: naudokite document.querySelector() su classList.add() metodu, kad įtrauktumėte aktyvią klasę į „JavaScript“
„JavaScript“ programoje „ document.querySelector() “ metodas naudojamas pirmam elementui iš kodo gauti. Galite nurodyti klases ir ID naudodami querySelector() metodą. Jis gali būti naudojamas su ' classList.add() “ metodas, skirtas įtraukti aktyvią klasę „JavaScript“.
Pavyzdys
Dabar naudosime tik „ document.querySelector() 'su id' #txt “, kad pasirinktumėte pastraipos elementą. Vėlgi, metodas classList.add() bus naudojamas aktyviam ' nauja klasė “:
funkcija aktyvuoti ( ) {čia yra = dokumentas. querySelector ( '#txt' ) ;
a. klasių sąrašas . papildyti ( 'nauja klasė' ) ;
}
Išvestis
Išmokome du paprasčiausius metodus, kaip įtraukti aktyvią klasę į „JavaScript“.
Išvada
Norėdami pridėti aktyvią klasę, galime naudoti „ getElementById() “ arba „ querySelector() “ su classList.add() metodu. Abu minėti metodai pirmiausia gauna elementus pagal savo ID, tada naudojant classList.add() metodą, elementui priskirtą naują klasės pavadinimą, kurį galima naudoti stiliaus tikslais. Šiame įraše aprašyta procedūra, susijusi su aktyvios klasės įtraukimu į „JavaScript“.