Over het data-attribuut in HTML5-tags
Het komt regelmatig voor dat er gegevens in een tag moeten worden opgenomen die specifiek zijn voor het webdocument c.q.
de website, bijvoorbeeld een tooltip. Een van de oude trucs is zelf een attribuut
maken en daar de gegevens in zetten. Dat is echter veel programmeerwerk en het vraagt veel rekenkracht van de PC.
In HTML5 is daar een elegante oplossing voor bedacht: het data-attribuut.
De naam van een data-attribuut bestaat uit het woord data, gevolgd door een min-teken en een vrij te kiezen naam, bijvoorbeeld:
data-type
data-index-nummer
Daarna volgt een =-teken en een vrij te kiezen tekst tussen dubbele aanhalingstekens.
Web-ontwikkelaars noemen dit in wandeling "data-*".
Een voorbeeld:
- : auto,
- : bromfiets,
- : skateboard,
Bovenstaand lijstje ziet er, behalve de kleurtjes, niet erg spectaculair uit. De code is interessanter. De list-tags hebben elk een class, een uniek id en drie data-attributen:
<ul>
<li id="voertuig1" class="voertuig"
data-aandrijving="motor" data-soort="Vierwieler"
data-aantal-cilinders="4">: auto, </li>
<li id="voertuig2" class="voertuig"
data-aandrijving="motor" data-soort="Tweewieler"
data-aantal-cilinders="1">: bromfiets, </li>
<li id="voertuig3" class="voertuig"
data-aandrijving="spieren" data-soort="Vierwieler"
data-aantal-cilinders="0">: skateboard, </li>
</ul>
Elk item van deze lijst heeft de data-attributen data-aandrijving, data-soort en data-aantal-cilinders. Elk item heeft de class voertuig. Deze dient om de tekst van de <li>-tag te koppelen aan de CSS. Daarnaast heeft elk item van de lijst een uniek id. Dat dient alleen om het makkelijker te maken om er aan te refereren met JavaScript.
Gebruik van data-* met CSS
Elk list-item heeft een eenvoudige tekst. Voor dit voorbeeld bestaat die uit een dubbele punt, een spatie, een woord, een
komma en een spatie. Op het scherm is die groen gekleurd; dit is gestuurd door de CSS van de class voertuig.
Vóór de list-tekst staat de inhoud van data-soort (rood). Er na staat de inhoud van data-aandrijving en data-aantal-cilinders, met wat extra tekst (blauw).
De rode tekst wordt gemaakt met .voertuig:before. De inhoud van data-soort wordt met behulp van de CSS-function attr() in de content van .voertuig:before gezet.
De blauwe tekst wordt gemaakt met .voertuig:after. De inhoud van data-aandrijving en data-aantal-cilinder wordt met behulp van de CSS-function attr(), samen met wat extra tekst, in de content van .voertuig:after gezet.
Zie ook het item Content opmaken met :before en :after.
De CSS-code ziet er als volgt uit:
<style>
.voertuig { color:#090 }
.voertuig:before { content: attr(data-soort); color:#d00}
.voertuig:after { content: " aangedreven door: "
attr(data-aandrijving) ", aantal cilinders: "
attr(data-aantal-cilinders); color:#009}
</style>
Zet dit style-block bij voorkeur in de <HEAD>, maar in elk geval vóór de <ul>-tag.
Gebruik van data-* met JavaScript
Je kunt elk attribuut van een tag veranderen met JavaScript. Daarvoor het je functies zoals getAttribute() en setAttribute().
Zie daarvoor de items Zelf attributen in tags maken en gebruiken en
Attributen van tags wijzigen.
Je kunt de inhoud van de data-attributen dus ook veranderen. Als je op de knop hiernaast klikt, wordt de eerste regel van het
voorbeeld-lijstje veranderd. De content van de CSS verandert dan mee, omdat de CSS aan die content is gekoppeld.
Om dit te bereiken kun je direct refereren aan dataset. Na dataset komt de naam van het data-attribuut dat je wilt veranderen. Zie de onderstaande code. De function Voorbeeld1Aanpassen() wordt uitgevoerd als je op de knop klikt.
<script>
function Voorbeeld1Aanpassen() {
var xxx = document.getElementById('voertuig1');
xxx.dataset.soort = "Vierwieler (Flintstone-versie)";
xxx.dataset.aandrijving = "een paar voeten";
xxx.dataset.aantalCilinders = "0 (nog niet uitgevonden)";
}
</script>
Als je een dataset-naam hebt waar een min-teken in voorkomt (zoals hier met aantal-cilinders) moet je de naam omzetten
van de CSS-schrijfwijze naar de JavaScript schrijfwijze:
Het min-teken wordt weggelaten, de eerste letter na het min-teken wordt een hoofdletter. In dit geval: aantal-cilinders
wordt aantalCilinders.
Opmerking:
Een ander voorbeeld van het gebruik van data-attributen en CSS vind je in het item Tooltips in CSS.
