TechCodeview

JavaScript classList on JavaScriptin DOM-ominaisuus, jonka avulla voidaan muotoilla elementin CSS-luokkia (Cascading Style Sheet). JavaScript classList on vain luku -ominaisuus, joka palauttaa CSS-luokkien nimet. Se on JavaScriptin ominaisuus suhteessa muihin JavaScriptin ominaisuuksiin, jotka sisältävät tyylin ja luokan nimen. Tyyli-ominaisuus palauttaa CSS-luokkaelementin värin tai muun tyylin, ja classNamea käytetään palauttamaan CSS-tiedostossa käytettyjen luokkien nimet. Ominaisuudet className ja classList palauttavat kuitenkin niiden luokkien nimet, joita olemme käyttäneet CSS-tiedostossa, mutta eri tavoin. ClassName-ominaisuus palauttaa luokkien nimet merkkijonon muodossa, kun taas ominaisuus classList palauttaa JavaScript palauttaa luokkien nimet taulukon muodossa.

Täällä käydään lyhyt keskustelu JavaScript classLististä ja keskustellaan myös sen menetelmistä niiden käytännön toteutuksissa.

Esimerkki JavaScript classList-ominaisuudesta

Alla on esimerkki JavaScript classList-ominaisuudesta, jonka kautta saamme elementin luokan arvon.

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

Yllä olevan koodin tulos näkyy alla:

JavaScript classList-ominaisuus

ClassList-ominaisuutta käytetään edustamaan luokkaelementtien arvoa, joka on a DOMTokenList esine. Se on vain luku -ominaisuus, mutta voimme muokata sen arvoa muokkaamalla ohjelmassa käytettyjä luokkia. JavaScript classList-ominaisuus koostuu seuraavista menetelmistä, joiden avulla voimme suorittaa erilaisia ​​toimintoja luokan elementeille:

lisätä():Add()-menetelmää käytetään yhden tai useamman luokan lisäämiseen elementtiin.Poista():Remove()-menetelmää käytetään yhden tai useamman luokan poistamiseen elementissä olevien luokkien määrästä.vaihtaa():Toggle()-menetelmää käytetään elementin määritettyjen luokkanimien vaihtamiseen. Se tarkoittaa, että yhdellä napsautuksella määritetty luokka lisätään ja toisella napsautuksella luokka poistetaan. Se tunnetaan elementin vaihto-ominaisuudena.korvata():Replace()-menetelmää käytetään olemassa olevan luokan korvaamiseen uudella luokalla.sisältää():JavaScript classList-ominaisuuden include()-menetelmää käytetään Boolen arvon palauttamiseen lähtönä. Jos luokka on läsnä, arvo palautetaan tosi, muuten palautetaan false.tuote():Item()-menetelmää käytetään tietyn indeksin luokkien nimen näyttämiseen. Siten se palauttaa luokan nimen.

Nämä ovat joitain menetelmiä, joita käytetään JavaScript-luokkaluettelossa.

java silmukat

Keskustelemme yksitellen.

aseta näppäimistöön

classList.add()

Funktio, jota käytetään yhden tai useamman luokan lisäämiseen CSS-elementtiin.

Esimerkki:

Alla oleva esimerkki näyttää, kuinka luokka lisätään classList.add() -menetelmällä:

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

Koodissa, kun käyttäjä napsauttaa painiketta, uusi luokka lisätään olemassa oleviin luokkiin. Tuloste painikkeen napsautuksen jälkeen näkyy alla:

classList.remove()

Poista()-funktiota käytetään olemassa olevien luokkien poistamiseen elementeistä.

Alla oleva esimerkki näyttää, kuinka yksi tai useampi luokka poistetaan käyttämällä classlist.remove() -menetelmää:

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

Yllä olevassa koodissa, kun käyttäjä napsauttaa painiketta, tietty määritetty luokka poistetaan olemassa olevista CSS-luokista. Tuloste painikkeen napsautuksen jälkeen näkyy alla:

Classlist.toggle()

Toggle()-painiketta käytetään luokkien vaihtamiseen elementtiin. Se tarkoittaa uuden luokan lisäämistä tai olemassa olevien luokkien poistamista.

Alla on esimerkki, joka auttaa meitä ymmärtämään, kuinka käyttää toggle()-menetelmää luokkien lisäämiseen tai poistamiseen.

Esimerkki:

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

Koodissa, kun käyttäjä napsauttaa painiketta, luokka lisätään tai poistetaan CSS-luokista. Tuloste painikkeen napsautuksen jälkeen näkyy alla:

aws sns

Classlist.contains()

Metodi sisältää() tarkistaa, onko määritettyä luokkaa CSS-luokissa ja se palauttaa sen suhteen Boolen arvon tosi tai epätosi.

Alla on esimerkki, joka näyttää kuinka etsiä luokkaa, jos se on olemassa tai ei, käyttämällä include()-metodia:

Esimerkki:

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

Yllä olevasta koodista nähdään, että kun käyttäjä napsauttaa painiketta, se tarkistaa määritetyn luokan, jos se on CSS-luokissa. Jos se on olemassa, Boolen arvoksi palautetaan tosi. Muussa tapauksessa se palauttaa väärän. Yllä olevan koodin tulos painikkeen napsautuksen jälkeen näkyy alla:

vlc lataa videoita youtubesta

classlist.replace()

Replace()-menetelmää käytetään olemassa olevan luokan korvaamiseen uudella. Se ei tarkoita, että luokka poistetaan elementeistä, vaan olemassa olevan luokan ominaisuudet korvataan uuden luokan ominaisuuksilla.

Alla on esimerkki, jonka avulla ymmärrämme, kuinka voimme korvata olemassa olevan luokan uudella luokalla:

Esimerkki:

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

Yllä olevassa koodissa, kun käyttäjä napsauttaa painiketta, nykyiset luokan ominaisuudet korvataan uusilla luokan ominaisuuksilla. Tuloste painikkeen napsautuksen jälkeen näkyy alla:

classList.item()

Item()-funktiota käytetään palauttamaan määritetyssä indeksiarvossa olevan luokan nimi.

Alla on esimerkki, joka auttaa meitä ymmärtämään, kuinka item()-menetelmää käytetään arvon palauttamiseen:

css-siirtymän läpinäkyvyys

Esimerkki:

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

Koodissa, kun käyttäjä napsauttaa painiketta, määritetyssä hakemistossa oleva luokka näytetään. Napsautettuaan painiketta, saamme määritetyn indeksiluokan arvon, kuten alla on esitetty:

Nämä ovat joitakin classList DOM -objektin menetelmiä ja kaikkea classListista.