HTML Academy · Lektion

Anpassade dataattribut: data-*

Lagra anpassade data direkt på element med data-*-attribut.

Lektion 4 av 413 steg

Anpassade dataattribut: data-* är en gratis lektion i HTML Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för HTML Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i HTML Academy innehåller totalt 4 lektioner.

Vad är data-*-attribut?

Anpassade dataattribut låter er lagra extra information direkt på HTML-element:

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

Varför data-* finns

Innan data-* lagrade utvecklare extra data i:

Dolda inmatningsfält (rörigt)
CSS-klassnamn (ömtåligt)
Icke-standardiserade attribut som rel eller title (ogiltig HTML)

HTML5 standardiserade data-* som det officiella sättet att bädda in anpassade data utan att påverka semantik eller presentation.

Namngivningsregler

Regler för namngivning av data-*-attribut:

Måste börja med data-
Namnet kan innehålla gemener, siffror, bindestreck, understreck och punkter
Inga versaler i namnet (HTML-specifikationen gör dem till gemener)
Namnet får inte börja 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 -->

Läsa data-* i JavaScript

Åtkomst till anpassade data sker via egenskapen dataset:

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

Skriva data-* med dataset

Ange och ta bort dataattribut 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 från bindestreck till camelCase

API:t dataset konverterar bindestrecksavgränsade namn till 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-attributselektorer

Använd dataattribut i CSS-selektorer:

[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 för verktygstips

Bygg verktygstips med enbart CSS och dataattribut:

<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 för tillståndsspårning

Spåra komponenters tillstånd med dataattribut:

<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-* jämfört med JavaScript-variabler

När ni ska använda data-* jämfört med att lagra data i JavaScript:

Använd data-* för värden som motsvarar direkt ett DOM-element och kan läsas av CSS
Använd JavaScript-variabler eller -objekt för komplexa datastrukturer som inte är knutna till specifika element
Lagra inte stora eller känsliga data i data-* — de är synliga i DevTools

data-* är inte till för presentation

Vanliga misstag att undvika:

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

Snabbkontroll

Hur får dataset-API:t åtkomst till attributet data-product-id?

Besvara frågan i den interaktiva lektionen

Sammanfattning: data-*-attribut

Det viktigaste om anpassade dataattribut:

data-name="value" — lagra anpassade metadata på element
Åtkomst sker via element.dataset.camelCase
Bindestreck konverteras till camelCase i dataset-API:t
Använd i CSS med selektorer som [data-name="value"]
Lagra aldrig känsliga data (nycklar, lösenord) i dataattribut

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 40
Lektioner: 159

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Anpassade dataattribut: data-*” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen HTML Academy, inklusive ”Anpassade dataattribut: data-*”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i HTML Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Anpassade dataattribut: data-*”?

Lagra anpassade data direkt på element med data-*-attribut. Ni övar på HTML Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig HTML Academy?

Du behöver inga förkunskaper. Utbildningen i HTML Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Anpassade dataattribut: data-*”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här HTML Academy-lektionen?

Ja. Varje HTML Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till HTML Academy