JavaScript Academy · Oppitunti

Määritteiden ja luokkien muokkaaminen

Käyttäkää setAttributea ja classList-API:a.

Oppitunti 3/413 vaihetta

Määritteiden ja luokkien muokkaaminen on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Attribuutit ja luokat

Elementeillä on attribuutteja, kuten href tai data-id, sekä CSS-luokkia. JavaScript tarjoaa tarkat rajapinnat niiden molempien lukemiseen ja muuttamiseen.

getAttribute

getAttribute lukee attribuutin arvon merkkijonona tai palauttaa null, jos attribuuttia ei ole.

const link = document.querySelector("a");
console.log(link.getAttribute("href"));

setAttribute

setAttribute luo attribuutin tai päivittää sen arvon. Arvot ovat aina merkkijonoja.

link.setAttribute("href", "https://example.com");
link.setAttribute("target", "_blank");

removeAttribute ja hasAttribute

Käyttäkää removeAttribute-menetelmää attribuutin poistamiseen ja hasAttribute-menetelmää sen olemassaolon tarkistamiseen.

if (link.hasAttribute("target")) {
  link.removeAttribute("target");
}

Ominaisuudet ja attribuutit

Monilla attribuuteilla on myös vastaava elementin ominaisuus, kuten element.id tai input.value. Ominaisuudet kuvaavat nykyistä tilaa, kun taas attribuutit sisältävät usein HTML-koodissa alun perin määritetyn arvon.

input.value;                 // current value
input.getAttribute("value"); // original default

dataset data-*-attribuuteille

Mukautetut data-*-attribuutit ovat käytettävissä dataset-olion kautta camelCase-muotoisilla avaimilla.

const card = document.querySelector(".card");
console.log(card.dataset.userId); // from data-user-id
card.dataset.state = "open";       // sets data-state

classList – yleiskatsaus

classList on reaaliaikainen olio luokkien hallintaan ilman className-merkkijonon manuaalista muokkaamista.

const box = document.querySelector(".box");
console.log(box.classList);

classList.add ja remove

add- ja remove-menetelmät hyväksyvät yhden tai useita luokkien nimiä ja käsittelevät kaksoiskappaleet tai puuttuvat luokat ongelmitta.

box.classList.add("active", "highlight");
box.classList.remove("hidden");

classList.toggle

toggle lisää luokan, jos sitä ei ole, ja poistaa sen, jos se on olemassa. Se palauttaa uuden tilan totuusarvona. Toinen argumentti pakottaa luokan käyttöön tai pois käytöstä.

box.classList.toggle("open");
box.classList.toggle("open", true); // force add

classList.contains ja replace

contains tarkistaa, kuuluuko luokka joukkoon, ja replace vaihtaa yhden luokan toiseen paikallaan.

if (box.classList.contains("active")) {
  box.classList.replace("active", "inactive");
}

Miksi classList on parempi kuin className

className-merkkijonon muokkaaminen voi vahingossa korvata muita luokkia. classList muuttaa turvallisesti vain kohteena olevia luokkia.

box.className = "active"; // wipes all other classes
box.classList.add("active"); // keeps the rest

Pikatarkistus

Valitkaa toggle-toiminta.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Lukekaa ja kirjoittakaa attribuutteja menetelmillä getAttribute/setAttribute/removeAttribute/hasAttribute ja käyttäkää data-*-attribuutteja dataset-olion kautta. Hallitkaa luokkia classList-menetelmillä add, remove, toggle, contains ja replace, jotka ovat turvallisempia kuin className-arvon korvaaminen.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 59
Oppitunnit: 200

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Määritteiden ja luokkien muokkaaminen” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Määritteiden ja luokkien muokkaaminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Määritteiden ja luokkien muokkaaminen”?

Käyttäkää setAttributea ja classList-API:a. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Määritteiden ja luokkien muokkaaminen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?

Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: JavaScript Academy