Een `data-*` attribuut is een aangepast data attribuut dat u kunt gebruiken om private gegevens op te slaan die zijn geassocieerd met verschillende elementen in uw HTML-document. Het doel van de `data-*` attributen is om private gegevens op te slaan die worden verbruikt door de pagina of toepassing, voor welke er geen geschiktere attributen of elementen bestaan.
Dit is hoe u het kunt gebruiken:
```
…
```
In dit voorbeeld, hebben wij aan het `
- `data-columns`: Bevat het aantal columns.
- `data-index-number`: Een uniek ID.
- `data-parent`: Beschrijft het parent element.
De `data-*` attributen bestaat uit twee delen:
1. Het attribuut begint altijd met het woord ‘data-’ gevolgd door iets dat u kiest, waardoor er unieke namen ontstaan zoals `data-id`, `data-fields`, `data-options`, enzovoort.
2. De waarde van het `data-*` attribuut is de informatie of gegevens die u wilt opslaan die horen bij het specifieke element.
U kunt deze data attributen selecteren en manipuleren met JavaScript en CSS.
In JavaScript, kunt u de `dataset` property gebruiken om data attributen te lezen:
```
let article = document.querySelector(‘#electriccars’);
console.log(article.dataset.columns); // 3
console.log(article.dataset.indexNumber); // 12314
console.log(article.dataset.parent); // cars
```
In CSS kunt u de `attr()` function gebruiken om de waarde van een `data-*` attribuut te lezen:
\`\`\`css
article::before {
content: attr(data-parent);
}
\`\`\`
In dit geval wordt de waarde van `data-parent` toegevoegd voor de inhoud van het `
