JavaScript
Attributs de données

Syntaxe

• var x = HTMLElement.dataset. *;
• HTMLElement.dataset. * = "Valeur";

Remarques

Accéder aux attributs de données

Utilisation de la propriété de jeu de données

La nouvelle propriété dataset permet d'accéder (à la fois à la lecture et à l'écriture) à tous les attributs de data-* de tout élément.

<p>Countries:</p>
<ul>
  <li id="C1" onclick="showDetails(this)" data-id="US" data-dial-code="1">USA</li>
  <li id="C2" onclick="showDetails(this)" data-id="CA" data-dial-code="1">Canada</li>
  <li id="C3" onclick="showDetails(this)" data-id="FF" data-dial-code="3">France</li>
</ul>
<button type="button" onclick="correctDetails()">Correct Country Details</button>
<script>
function showDetails(item) {
    var msg = item.innerHTML
            + "\r\nISO ID: " + item.dataset.id
            + "\r\nDial Code: " + item.dataset.dialCode;
    alert(msg);
}

function correctDetails(item) {
    var item = document.getEmementById("C3");
    item.dataset.id = "FR";
    item.dataset.dialCode = "33";
}
</script>

Remarque: La propriété dataset est uniquement prise en charge dans les navigateurs modernes et est légèrement plus lente que les méthodes getAttribute et setAttribute prises en charge par tous les navigateurs.

Utilisation des méthodes getAttribute & setAttribute

Si vous souhaitez prendre en charge les anciens navigateurs avant HTML5, vous pouvez utiliser les méthodes getAttribute et setAttribute utilisées pour accéder à tous les attributs, y compris les attributs de données. Les deux fonctions de l'exemple ci-dessus peuvent être écrites de cette manière:

<script>
function showDetails(item) {
    var msg = item.innerHTML
            + "\r\nISO ID: " + item.getAttribute("data-id")
            + "\r\nDial Code: " + item.getAttribute("data-dial-code");
    alert(msg);
}

function correctDetails(item) {
    var item = document.getEmementById("C3");
    item.setAttribute("id", "FR");
    item.setAttribute("data-dial-code", "33");
}
</script>