Hogyan lehet manipulálni az osztályokat a jQuery nélkül a HTML5 classList API használatával

Kezelőfelület-fejlesztőként gyakran meg kell változtatnia a CSS-szabályokat annak alapján, hogy a felhasználó milyen interakcióba lép az oldal elemeivel.

Korábban a jQuery-re támaszkodtam az ilyen típusú DOM-manipulációk kezelésében. Bizonyos esetekben azonban nincs értelme a teljes jQuery könyvtárat importálni, csak néhány alapvető DOM-manipulációt hajthat végre.

Szerencsére a HTML5 lehetőséget kínál erre natív módon, a jQuery nélkül.

Hogyan fedeztem fel a HTML5 classList módszerét

Néhány nappal ezelőtt olvastam egy kódot. Észrevettem, hogy az egyik projekt a jQuery-t tartalmazta függőségként, csak azért, hogy osztályokat adhassanak hozzá és távolítsanak el, amikor a felhasználó egy gombra kattintott az oldalon. A teljes interakciós kód csak 11 kódsor volt.

Furcsának tartottam, hogy így csinálják. Ez egyenértékű volt egy bazooka (jQuery) használatával egy szúnyog megölésére (osztályok hozzáadása és eltávolítása kattintással).

Eszembe jutott, hogy valószínűleg hasonló dolgokat tettem korábbi kódolási projektjeim során. Ezért úgy döntöttem, hogy megpróbálom ugyanazt a funkciót megismételni egyszerű JavaScript használatával, és megnézem, mit tanulhatok ebből.

A gyors keresés számos lehetőséget adott fel erre egyszerű sablonban. A classList módszerrel jártam, mert könnyen érthető, és a böngészők közötti támogatás is nagyon jó.

Ne feledje, hogy ha támogatnia kell az Internet Explorer IE 11-nél régebbi verzióit, előfordulhat, hogy alternatív módszert kell találnia, vagy többszörös kitöltést kell használnia.

Ha teljes mértékben támaszkodik a jQuery használatára a DOM kezeléséhez, akkor ez egy nagyszerű hely, ahol elkezdhet némi függetlenséget szerezni a jQuery-től.

Mi az a classList API?

A HTML5 classList API lehetőséget nyújt az elemhez társított összes osztály megragadására, hogy a JavaScript használatával módosíthassa őket.

A classList DOM tulajdonság elemen történő használata egy DOMTokenList- t ad vissza . Ez tartalmazza az elemre alkalmazott összes osztályt és a length tulajdonságot, amely az elem összes osztályának számát jelöli.

Vessen egy pillantást erre a példára:

//JavaScriptvar about = document.getElementById("about"); console.log(about.classList); //logs { 0: "content-wrapper" 1: "about" 2: "animated" length: 3 value: "content-wrapper about animated" }

A fentieket kipróbálhatja böngészőjében, hogy működés közben lássa.

Egy elem osztályainak megszerzése nagyon jó, de önmagában mégsem olyan hasznos. Szükségünk van az osztályok kezelésének és frissítésének módjára. A classList tulajdonság néhány metódust kínál, amelyek pontosan ezt teszik:

  • add () : Megadja a megadott osztályokat
  • remove () : Eltávolítja a megadott osztályokat
  • tartalmazza () : Ellenőrzi, hogy a megadott osztály létezik-e az elemen
  • toggle () : a megadott osztály váltása
  • index () : az osztályt adja vissza a lista egy meghatározott helyén
  • length : az osztályok számát adja vissza

Vessünk egy pillantást egymás után.

Osztályok hozzáadása

Osztály hozzáadása egy elemhez egyszerű. Csak alkalmazza az osztály nevét argumentumként az add () metódusra. Ne feledje, hogy ha az osztály neve már létezik az elemen, akkor azt nem adják hozzá újra.

//JavaScriptdocument.getElementById("headline").classList.add("title"); //gives

Több osztály hozzáadásához válassza el az osztályokat vesszővel:

//JavaScriptdocument.getElementById("headline").classList.add("title", "headline"); //gives

Osztályok eltávolítása

Osztály eltávolításához mindössze annyit kell tennie, hogy az osztály nevét argumentumként adja át az remove () metódushoz. Ha az osztály neve még nem létezik a classList listában , akkor hiba lép fel.

//JavaScriptdocument.getElementById("header").classList.remove("masthead"); //gives

Több osztály eltávolításához válassza el az osztályokat vesszővel:

//JavaScriptdocument.getElementById("header").classList.remove("masthead", "headline"); //gives

Ellenőrizze, hogy létezik-e osztály

A tartalmaz () metódust használva ellenőrizhetjük, hogy egy adott osztály szerepel-e az elem classList - jében, és a visszatérési érték alapján végezhetünk műveleteket.

Például:

Click Me
//JavaScriptvar button = document.getElementById("btn"); if (button.classList.contains("hidden")) { //do something } else { //do something else}

Osztályok váltása

A felhasználói műveletek alapján osztály hozzáadása vagy eltávolítása gyakori dolog. Pontosan ezt akartam elérni a classList segítségével.

A toggle () módszerrel válthat a hozzáadás és az eltávolítás között .

Végül a következőket tettem:

//JavaScriptvar page = document.getElementById("page"); var menu = document.getElementById("menu"); var nav = document.getElementById("navigation"); 
function hasClass() { page.classList.toggle("open"); menu.classList.toggle("active"); nav.classList.toggle("hidden"); }

Ellenőrizze az osztályok számát

To find out how many classes are applied to an element, use the length property:

//JavaScriptdocument.getElementById("navbar").classList.length; // 2

Wrapping up

As you can see, the classList API is easy to use. I encourage you to begin exploring its capabilities in your own applications.

Also, leave a comment if you have any questions, or reach out to me on Twitter. For more articles like this one, check out my blog. Thanks for reading!