TechCodeview

„JavaScript classList“ yra „JavaScript“ DOM ypatybė, leidžianti formuoti elemento CSS (pakopinio stiliaus lapo) klases. JavaScript classList yra tik skaitoma ypatybė, kuri pateikia CSS klasių pavadinimus. Tai yra „JavaScript“ savybė, palyginti su kitomis „JavaScript“ savybėmis, įskaitant stilių ir klasės pavadinimą. Stiliaus ypatybė grąžina CSS klasės elemento spalvą ar kitą stilių, o className naudojama CSS faile naudojamų klasių pavadinimams grąžinti. Tačiau ypatybės „className“ ir „classList“ grąžina klasių, kurias naudojome CSS faile, pavadinimus, tačiau skirtingais būdais. Ypatybė className grąžina klasių pavadinimą eilutės forma, o ypatybė classList JavaScript grąžina klasių pavadinimus masyvo pavidalu.

Čia trumpai aptarsime „JavaScript“ klasių sąrašą ir aptarsime jo metodus su praktiniais jų įgyvendinimais.

JavaScript classList nuosavybės pavyzdys

Žemiau pateikiamas JavaScript classList nuosavybės pavyzdys, per kurį gausime elemento klasės vertę.

 <h3>Click on the button to get the class value </h3><br> function getClass() { var e = document.getElementById(&apos;btn&apos;); alert(e.classList); } 

Aukščiau pateikto kodo išvestis parodyta žemiau:

„JavaScript“ klasės sąrašo ypatybė

Ypatybė classList naudojama pavaizduoti klasės elementų vertę, kuri yra a DOMTokenList objektas. Tai yra tik skaitoma nuosavybė, tačiau mes galime keisti jos vertę manipuliuodami programoje naudojamomis klasėmis. „JavaScript“ classList nuosavybę sudaro šie metodai, kuriais galime atlikti įvairias klases elementų operacijas:

papildyti():Metodas add() naudojamas vienai ar kelioms klasėms pridėti prie elemento.pašalinti ():Metodas remove() naudojamas pašalinti vieną ar daugiau klasių iš elemente esančių klasių skaičiaus.perjungti ():Toggle() metodas naudojamas perjungti nurodytus elemento klasių pavadinimus. Tai reiškia, kad vienu paspaudimu nurodyta klasė pridedama, o kitu paspaudimu klasė pašalinama. Tai žinoma kaip elemento perjungimo savybė.pakeisti ():Keitimo() metodas naudojamas esamai klasei pakeisti nauja klase.yra ():„JavaScript“ ypatybės classList metodas include() naudojamas Būlio reikšmei grąžinti kaip išvestį. Jei klasė yra, vertė grąžinama kaip tiesa, kitaip grąžinama false.prekė ():Item() metodas naudojamas tam tikro indekso klasių pavadinimams rodyti. Taigi jis grąžina klasės pavadinimą.

Tai yra keletas metodų, naudojamų „JavaScript“ klasių sąraše.

Aptarsime po vieną.

java masyvo rūšiavimas

classList.add()

Funkcija, naudojama vienai ar daugiau klasių pridėti prie CSS elemento.

Pavyzdys:

kur yra nešiojamojo kompiuterio klaviatūros įterpimo klavišas

Toliau pateiktame pavyzdyje parodyta, kaip pridėti klasę naudojant classList.add() metodą:

 .myClass {background: red;} <h3> Click on the button and add the class</h3> <br> function getClass() { var e = document.getElementById(&apos;Btn&apos;); e.classList.add(&apos;myClass&apos;); } 

Kode, vartotojui spustelėjus mygtuką, nauja klasė pridedama prie esamų klasių. Išvestis paspaudus mygtuką rodoma žemiau:

classList.remove()

Funkcija remove() naudojama esamoms klasėms pašalinti iš elementų.

Toliau pateiktame pavyzdyje parodyta, kaip pašalinti vieną ar daugiau klasių naudojant classlist.remove() metodą:

 .myClass {background: red;} <h3> Click on the button and remove the class </h3> <br> function getClass() { var e = document.getElementById(&apos;Btn&apos;); e.classList.remove(&apos;myClass&apos;); } 

Aukščiau pateiktame kode, vartotojui paspaudus mygtuką, konkreti nurodyta klasė pašalinama iš esamų CSS klasių. Išvestis paspaudus mygtuką rodoma žemiau:

Classlist.toggle()

Mygtukas toggle() naudojamas klasėms perjungti į elementą. Tai reiškia naujos klasės pridėjimą arba esamų klasių pašalinimą.

Toliau pateikiamas pavyzdys, kuris leis mums suprasti, kaip naudoti toggle() metodą, norint pridėti ar pašalinti klases.

iskcon pilna forma

Pavyzdys:

 .myClass1{background: red;} .myClass2 {background: blue;} <h3> Click on the button to add or remove the class</h3> <br> function get_toggle() { var e = document.getElementById(&apos;Btn&apos;); e.classList.toggle(&apos;myClass2&apos;); } 

Kode, vartotojui spustelėjus mygtuką, klasė bus pridėta arba pašalinta iš CSS klasių. Išvestis paspaudus mygtuką rodoma žemiau:

Classlist.contains()

Metodas include() naudojamas patikrinti, ar nurodyta klasė egzistuoja CSS klasėse, ir jos atžvilgiu jis grąžina Būlio reikšmę kaip true arba false.

Žemiau pateikiamas pavyzdys, rodantis, kaip ieškoti klasės, jei ji egzistuoja arba nenaudojant metodo include():

Pavyzdys:

 function getClass() { var e = document.getElementById(&apos;Btn&apos;); document.write(e.classList.contains(&apos;myClass&apos;)+&apos; <br>&apos;+&apos;myclass is the name of the class&apos;); } 

Aukščiau pateiktame kode matyti, kad kai vartotojas paspaudžia mygtuką, jis patikrina, ar nėra nurodytos klasės, jei ji yra CSS klasėse. Jei ji yra, bus grąžinta Būlio reikšmė kaip true. Priešingu atveju jis grįš klaidingas. Aukščiau pateikto kodo išvestis paspaudus mygtuką rodoma žemiau:

classlist.replace()

Keitimo() metodas naudojamas esamai klasei pakeisti nauja. Tai nereiškia, kad klasė pašalinama iš elementų, bet esamos klasės savybės pakeičiamos naujos klasės savybėmis.

Žemiau pateikiamas pavyzdys, per kurį suprasime, kaip esamą klasę galime pakeisti nauja klase:

Pavyzdys:

siūlas.sunaikinti

 .myClass1 {background: red;} .myClass2 {background: blue;} function replace_Class() { var e = document.getElementById('Btn'); e.classList.replace('myClass1', 'myClass2'); } 

Aukščiau pateiktame kode, kai vartotojas spusteli mygtuką, esamos klasės savybės pakeičiamos naujomis klasės ypatybėmis. Išvestis paspaudus mygtuką rodoma žemiau:

classList.item()

Funkcija item() naudojama norint grąžinti klasės pavadinimą, kuris yra nurodytoje indekso reikšmėje.

Toliau pateikiamas pavyzdys, kuris leis mums suprasti, kaip naudoti item() metodą norint grąžinti vertę:

Pavyzdys:

 <h3> Click on the button to get the specified index value</h3><br> function get_Class() { var e = document.getElementById(&apos;Btn&apos;); alert(e.classList.item(2)); } 

Kode, vartotojui spustelėjus mygtuką, bus rodoma nurodytame indekse esanti klasė. Paspaudę mygtuką, gauname nurodytą indekso klasės reikšmę, kaip parodyta žemiau:

Tai yra keletas „classList“ DOM objekto metodų ir viskas apie „classList“.