TechCodeview

JavaScript classList je lastnost DOM JavaScripta, ki omogoča oblikovanje razredov CSS (Cascading Style Sheet) elementa. JavaScript classList je lastnost samo za branje, ki vrne imena razredov CSS. To je lastnost JavaScripta glede na druge lastnosti JavaScripta, ki vključuje slog in ime razreda. Lastnost style vrne barvo ali drug slog elementa razreda CSS, className pa se uporablja za vrnitev imen razredov, uporabljenih v datoteki CSS. Vendar pa lastnosti className in classList vrnejo imena razredov, ki smo jih uporabili v datoteki CSS, vendar na različne načine. Lastnost className vrne ime razredov v obliki niza, medtem ko lastnost classList JavaScript vrne ime razredov v obliki matrike.

Tukaj bomo na kratko razpravljali o JavaScript classList in razpravljali tudi o njegovih metodah z njihovimi praktičnimi izvedbami.

Primer lastnosti JavaScript classList

Spodaj je primer lastnosti JavaScript classList, prek katere bomo pridobili vrednost razreda elementa.

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

Izhod zgornje kode je prikazan spodaj:

Lastnost seznama razredov JavaScript

Lastnost classList se uporablja za predstavitev vrednosti elementov razreda, ki je a DOMTokenList predmet. Je lastnost samo za branje, vendar lahko spremenimo njeno vrednost z manipulacijo razredov, uporabljenih v programu. Lastnost JavaScript classList je sestavljena iz naslednjih metod, prek katerih lahko izvajamo različne operacije na elementih razreda:

dodaj():Metoda add() se uporablja za dodajanje enega ali več razredov v element.Odstrani():Metoda remove() se uporablja za odstranitev enega ali več razredov iz števila razredov, ki so prisotni v elementu.preklop():Metoda toggle() se uporablja za preklapljanje določenih imen razredov elementa. To pomeni, da se z enim klikom navedeni razred doda, z drugim klikom pa se razred odstrani. Znana je kot preklopna lastnost elementa.zamenjati():Metoda replace() se uporablja za zamenjavo obstoječega razreda z novim razredom.vsebuje():Metoda contains() lastnosti JavaScript classList se uporablja za vrnitev logične vrednosti kot izhod. Če je razred prisoten, je vrednost vrnjena kot true, sicer je vrnjena vrednost false.predmet():Metoda item() se uporablja za prikaz imena razredov na določenem indeksu. Tako vrne ime razreda.

To je nekaj metod, ki se uporabljajo v JavaScript classList.

polimorfizem v Javi

Razpravljali bomo enega za drugim.

poravnava slike v css

classList.add()

Funkcija, ki se uporablja za dodajanje enega ali več razredov v element CSS.

primer:

Spodnji primer prikazuje, kako dodati razred z metodo classList.add():

 .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;); } 

V kodi, ko uporabnik klikne na gumb, se nov razred doda obstoječim razredom. Rezultat po kliku na gumb je prikazan spodaj:

classList.remove()

Funkcija remove() se uporablja za odstranjevanje obstoječih razredov iz elementov.

Spodnji primer prikazuje, kako odstraniti enega ali več razredov z metodo classlist.remove():

 .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;); } 

Ko uporabnik v zgornji kodi klikne gumb, se določen določen razred odstrani iz obstoječih razredov CSS. Rezultat po kliku na gumb je prikazan spodaj:

Classlist.toggle()

Gumb toggle() se uporablja za preklapljanje razredov v element. To pomeni dodajanje novega razreda ali odstranitev obstoječih razredov.

Spodaj je primer, ki nam bo pomagal razumeti, kako uporabiti metodo toggle() za dodajanje ali odstranjevanje razredov.

primer:

 .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;); } 

Ko uporabnik v kodi klikne gumb, bo razred dodan ali odstranjen iz razredov CSS. Rezultat po kliku na gumb je prikazan spodaj:

tipi referenčnih podatkov v Javi

Classlist.contains()

Metoda contains() se uporablja za preverjanje, ali podani razred obstaja v razredih CSS, in v zvezi z njim vrne logično vrednost kot true ali false.

Spodaj je primer, ki prikazuje, kako z metodo contains() iskati razred, če obstaja ali ne:

primer:

 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;); } 

V zgornji kodi je razvidno, da ko uporabnik klikne na gumb, preveri, ali je določen razred prisoten v razredih CSS. Če je prisoten, bo vrnjena logična vrednost kot true. V nasprotnem primeru bo vrnil false. Izhod zgornje kode po kliku na gumb je prikazan spodaj:

sort arraylist v Javi

classlist.replace()

Metoda replace() se uporablja za zamenjavo obstoječega razreda z novim. To ne pomeni, da je razred odstranjen iz elementov, ampak se lastnosti obstoječega razreda nadomestijo z lastnostmi novega razreda.

Spodaj je primer, skozi katerega bomo razumeli, kako lahko zamenjamo obstoječi razred z novim razredom:

primer:

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

Ko uporabnik v zgornji kodi klikne gumb, se obstoječe lastnosti razreda nadomestijo z novimi lastnostmi razreda. Rezultat po kliku na gumb je prikazan spodaj:

classList.item()

Funkcija item() se uporablja za vrnitev imena razreda, ki je prisoten pri podani vrednosti indeksa.

Spodaj je primer, ki nam bo pomagal razumeti, kako uporabiti metodo item() za vrnitev vrednosti:

podniz niza java

primer:

 <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)); } 

Ko uporabnik klikne gumb, se v kodi prikaže razred, ki je prisoten v navedenem indeksu. Po kliku na gumb dobimo določeno vrednost razreda indeksa, kot je prikazano spodaj:

To je nekaj metod objekta DOM classList in vse o classList.