HTML Academy · leksjon

Egendefinerte dataattributter: data-*

Lagre egendefinerte data direkte på elementer med data-*-attributter.

Leksjon 4 av 413 trinn

Egendefinerte dataattributter: data-* er en gratis leksjon i HTML Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i HTML Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i HTML Academy inneholder totalt 4 leksjoner.

Hva er data-*-attributter?

Egendefinerte data-attributter lar deg lagre ekstra informasjon direkte på HTML-elementer:

<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 -->

Hvorfor data-* finnes

Før data-* lagret utviklere ekstra data i:

Skjulte input-felt (rotete)
CSS-klassenavn (skjørt)
Ikke-standardiserte attributter som rel eller title (ugyldig HTML)

HTML5 standardiserte data-* som den offisielle måten å bygge inn egendefinerte data på uten å påvirke semantikk eller presentasjon.

Navngivingsregler

Regler for navngiving av data-*-attributter:

Må starte med data-
Navnet kan inneholde små bokstaver, sifre, bindestreker, understreker og punktum
Navnet kan ikke inneholde store bokstaver (HTML-spesifikasjonen gjør dem om til små bokstaver)
Navnet kan ikke starte med 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 -->

Lese data-* i JavaScript

Få tilgang til egendefinerte data via dataset-egenskapen:

<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>

Skrive data-* med dataset

Angi og fjern data-attributter via dataset:

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

Konvertering fra bindestrek til camelCase

dataset-API-et konverterer navn med bindestrek til camelCase:

<!-- 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-attributtvelgere

Bruk data-attributter i CSS-velgere:

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

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

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

Mønster for verktøytips

Bygg verktøytips med ren CSS ved hjelp av data-attributter:

<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; }
*/

Mønster for tilstandssporing

Spor komponenttilstand med data-attributter:

<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-* kontra JavaScript-variabler

Når du skal bruke data-* i stedet for å lagre data i JavaScript:

Bruk data-* for verdier som tilsvarer et DOM-element direkte, og som kan leses av CSS
Bruk JavaScript-variabler/-objekter for komplekse datastrukturer som ikke er knyttet til bestemte elementer
Ikke lagre store eller sensitive data i data-* – de er synlige i DevTools

data-* er ikke for presentasjon

Vanlige feil som bør unngås:

<!-- 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 -->

Hurtigsjekk

Hvordan får dataset-API-et tilgang til et data-product-id-attributt?

Besvar den i den interaktive leksjonen

Oppsummering: data-*-attributter

Det viktigste om egendefinerte data-attributter:

data-name="value" – lagre egendefinerte metadata på elementer
Tilgås via element.dataset.camelCase
Bindestreker konverteres til camelCase i dataset-API-et
Brukes i CSS med [data-name="value"]-velgere
Ikke lagre sensitive data (nøkler, passord) i data-attributter

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 40
Leksjoner: 159

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Egendefinerte dataattributter: data-*» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien HTML Academy, inkludert «Egendefinerte dataattributter: data-*», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i HTML Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Egendefinerte dataattributter: data-*»?

Lagre egendefinerte data direkte på elementer med data-*-attributter. Du øver på HTML Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med HTML Academy?

Ingen tidligere erfaring er nødvendig. HTML Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Egendefinerte dataattributter: data-*»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne HTML Academy-leksjonen?

Ja. Alle HTML Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til HTML Academy