HTML Academy · Oppitunti

Mukautetut data-attribuutit: data-*

Tallenna mukautettuja tietoja suoraan elementteihin data-*-attribuuteilla.

Oppitunti 4/413 vaihetta

Mukautetut data-attribuutit: data-* on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/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 HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.

Mitä data-*-attribuutit ovat?

Mukautettujen data-attribuuttien avulla voit tallentaa lisätietoja suoraan HTML-elementteihin:

<button data-user-id="42" data-action="delete">Delete User</button>
<li data-category="frontend" data-level="beginner">HTML</li>

<!-- Format: data-[name]="value" -->
<!-- Any alphanumeric name after data- is valid -->
<!-- Values are always strings -->

Miksi data-* on olemassa

Ennen data-*-attribuutteja kehittäjät tallensivat lisätietoja seuraaviin:

Piilotettuihin syötekenttiin (epäkäytännöllistä)
CSS-luokkien nimiin (haurasta)
Epästandardeihin attribuutteihin, kuten rel tai title (virheellistä HTML:ää)

HTML5 vakiinnutti data-*-attribuutit viralliseksi tavaksi upottaa mukautettuja tietoja vaikuttamatta merkitykseen tai esitystapaan.

Nimeämissäännöt

data-*-attribuuttien nimeämissäännöt:

Nimen on alettava merkkijonolla data-
Nimi voi sisältää pieniä kirjaimia, numeroita, yhdysmerkkejä, alaviivoja ja pisteitä
Nimessä ei saa olla isoja kirjaimia (HTML-määritys muuttaa ne pieniksi kirjaimiksi)
Nimi ei saa alkaa merkkijonolla xml

<div data-user-id="1">OK</div>
<div data-product-category="tools">OK</div>
<!-- <div data-XML-thing="1">BAD: starts with xml -->
<!-- <div data-MyProp="1">BAD: uppercase in name -->

data-*-attribuuttien lukeminen JavaScriptillä

Käytä mukautettuja tietoja dataset-ominaisuuden kautta:

<button id="btn"
  data-user-id="42"
  data-action="delete"
  data-confirm-message="Are you sure?"
>
  Delete
</button>

<script>
const btn = document.getElementById('btn');
console.log(btn.dataset.userId);          // '42'
console.log(btn.dataset.action);          // 'delete'
console.log(btn.dataset.confirmMessage);  // 'Are you sure?'
// Note: data-user-id → dataset.userId (camelCase conversion)
</script>

data-*-attribuuttien kirjoittaminen datasetillä

Aseta ja poista data-attribuutteja datasetin avulla:

const card = document.querySelector('.card');

// Set:
card.dataset.status = 'active';
// Now: <div class="card" data-status="active">

// Delete:
delete card.dataset.status;
// Now: data-status is removed

// Alternatively with setAttribute:
card.setAttribute('data-status', 'inactive');
card.removeAttribute('data-status');

Yhdysmerkistä camelCase-muotoon

Dataset-rajapinta muuntaa yhdysmerkein erotellut nimet camelCase-muotoon:

<!-- HTML attribute         JavaScript dataset property -->
data-user-id           →   dataset.userId
data-product-category  →   dataset.productCategory
data-max-retries       →   dataset.maxRetries
data-is-active         →   dataset.isActive

CSS:n attribuuttivalitsimet

Käytä data-attribuutteja CSS-valitsimissa:

[data-status="active"] {
  color: green;
}

[data-status="inactive"] {
  color: gray;
  text-decoration: line-through;
}

/* Present but any value: */
[data-featured] {
  border: 2px solid gold;
}

Työkaluvihjemalli

Rakenna pelkällä CSS:llä toimivia työkaluvihjeitä data-attribuuttien avulla:

<span data-tooltip="This is a tooltip">Hover me</span>

/* CSS: */
/*
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);  /* attr() reads the attribute value */
  position: absolute;
  background: #333;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
[data-tooltip]:hover::after { opacity: 1; }
*/

Tilan seurantamalli

Seuraa komponentin tilaa data-attribuuttien avulla:

<button data-state="off" id="toggle">Toggle</button>

<script>
document.getElementById('toggle').addEventListener('click', function() {
  const state = this.dataset.state;
  this.dataset.state = state === 'off' ? 'on' : 'off';
  this.textContent = this.dataset.state === 'on' ? 'Active' : 'Toggle';
});
</script>

/* CSS: */
/* [data-state="on"] { background: green; color: white; } */

data-* vs JavaScript-muuttujat

Milloin data-*-attribuutteja kannattaa käyttää ja milloin tiedot kannattaa tallentaa JavaScriptiin:

Käytä data-*-attribuutteja arvoille, jotka liittyvät suoraan DOM-elementtiin ja joita CSS saattaa lukea
Käytä JavaScript-muuttujia ja -objekteja monimutkaisiin tietorakenteisiin, jotka eivät liity tiettyihin elementteihin
Älä tallenna suuria tai arkaluonteisia tietoja data-*-attribuutteihin — ne näkyvät DevToolsissa

data-* ei ole esitystapaa varten

Yleisiä vältettäviä virheitä:

<!-- BAD: storing presentation data in data-* -->
<div data-color="red" data-font-size="18">Text</div>
<!-- Use CSS classes instead: -->
<div class="text-danger text-lg">Text</div>

<!-- BAD: storing sensitive data -->
<div data-api-key="sk-123...">Content</div>
<!-- NEVER store secrets in HTML attributes -->

Pikatesti

Miten dataset-rajapinta käyttää data-product-id-attribuuttia?

Vastaa interaktiivisessa oppitunnissa

Kertaus: data-*-attribuutit

Mukautettujen data-attribuuttien tärkeimmät asiat:

data-name="value" — tallenna mukautettuja metatietoja elementteihin
Käytettävissä element.dataset.camelCase-muodossa
Yhdysmerkit muunnetaan dataset-rajapinnassa camelCase-muotoon
Käytä CSS:ssä [data-name="value"]-valitsimia
Älä koskaan tallenna arkaluonteisia tietoja (avaimia tai salasanoja) data-attribuutteihin

Aloita maksutta

Opi HTML 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: 40
Oppitunnit: 159

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Mukautetut data-attribuutit: data-*” ilmainen?

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

Mitä opin oppitunnilla ”Mukautetut data-attribuutit: data-*”?

Tallenna mukautettuja tietoja suoraan elementteihin data-*-attribuuteilla. Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?

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

Kuinka kauan ”Mukautetut data-attribuutit: data-*”-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ä HTML Academy-oppitunnilla?

Kyllä. Jokainen HTML 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: HTML Academy