Les attributs de données sont souvent appelés attributs data-* car ils sont toujours dans ce format. Les data du mot, puis un tableau de bord - , puis un autre texte auquel vous pouvez penser.

Pouvez-vous utiliser l'attribut de données seul?

<div data=""></div>

Cela peut ne pas nuire, mais vous ne pourrez pas obtenir l'API JavaScript que nous couvrirons plus tard dans ce guide. Vous créez en fait des attributs pour vous-même, ce qui est découragé, comme je l'ai mentionné dans l'introduction.

Que ne devrait pas être fait avec les attributs de données

Stockez le contenu qui devrait être accessible. Si le contenu doit être vu ou lire sur la page, ne les mettez pas simplement dans les propriétés de données et assurez-vous que le contenu se situe quelque part dans le contenu HTML.

<div data-name="Chris Coyier"></div>
<div>
  Chris Coyier
</div>

Voici plus d'informations sur le contenu caché.

Style à l'aide d'attributs de données

CSS peut sélectionner des éléments HTML basés sur les attributs et leurs valeurs.

 / * Sélectionnez n'importe quel élément avec cet attribut et valeur de données * /
[data-size = "grand"] {
  rembourrage: 2rem;
  taille de police: 125%;
}
/ * Vous pouvez le limiter à un élément ou à une classe ou à tout autre chose * /
bouton [data-type = "download"] {}
.card [data-pad = "extra"] {}

Cela peut être attrayant. Les crochets de style principal dans HTML / CSS sont des classes, et bien que les classes soient excellentes (elles ont une spécificité moyenne et une belle méthode JavaScript via classList ), les éléments l'ont ou ne l'ont pas (essentiellement sur ou désactivé ). à l'aide de data-* , vous pouvez obtenir cette fonction d'activation / désactivée, ainsi que de la possibilité de sélectionner en fonction de sa valeur au même niveau de spécificité.

 / * Si la propriété existe, sélectionnez * /
[Data-Size] {}
/ * Sélectionnez si l'attribut a une valeur spécifique * /
[Data-State = "Open"],
[aria-expanded = "true"] {}
/ * "Commencez par ..." sélecteur, ce qui signifie que cela correspondra "3" ou n'importe quel caractère commen?ant par 3, tels que "3.14" * /
[Version de données ^ = "3"] {}
/ * "Inclure" signifie si la valeur contient la cha?ne n'importe où * /
[Data-Company * = "Google"] {}

Spécificité du sélecteur d'attribut

C'est exactement la même chose que la classe. Nous considérons généralement la spécificité comme une valeur en quatre parties:

Style en ligne, ID, classe / propriétés, balises

Par conséquent, les sélecteurs de propriétés individuels sont 0, 0, 1, 0 . Des sélecteurs aiment ceci:

 div.card [data-foo = "bar"] {}

sera 0, 0, 2, 1 . 2 est d? au fait qu'il y a une classe ( .card ) et une propriété ( [data-foo="bar"] ), et 1 est parce qu'il y a une balise ( div ).

La spécificité du sélecteur d'attribut est inférieure à l'ID, supérieure à l'élément / balise, la même que la classe.

Valeurs de propriétés insensibles aux cas

Si vous devez corriger les incohérences de cas possibles dans les propriétés de données, le sélecteur de propriétés fournit une variante insensible à la casse pour cela.

 / * Va correspondre<div data-state="open"></div>
<div data-state="Open"></div>
<div data-state="OPEN"></div>
<div data-state="oPeN"></div>
* /
[data-state = "open" i] {}

Il s'agit de la lettre minuscule i dans le sélecteur de carré.

Visualiser les propriétés des données d'utilisation

CSS vous permet d'extraire les valeurs d'attribut de données et de les afficher en cas de besoin.

 / *<div data-emoji="?"> * /
[data-emoji] :: avant {
  Contenu: att (Data-Emoji); / * Return '?' * /
  marge droite: 5px;
}<h4> Exemple d'utilisation du style</h4>
<p> Vous pouvez utiliser l'attribut de données pour spécifier le nombre de colonnes requises pour le conteneur de la grille.</p>
<pre class="brush:php;toolbar:false"><div data-columns="2"></div>
<div data-columns="3"></div>
<div data-columns="4"></div>

Accéder aux propriétés de données en javascript

Comme tout autre attribut, vous pouvez accéder à la valeur en utilisant la méthode commune getAttribute .

 Soit Value = el.getAttribute ("Data-State");
// Vous pouvez également définir la valeur.
// return data-state = "effondré"
el.setAttribute ("Data-State", "effondré");

Mais les attributs de données ont également leurs propres API spéciales. Supposons que vous ayez un élément avec plusieurs attributs de données (c'est absolument OK):

Si votre élément a une référence, vous pouvez définir et obtenir les propriétés comme ceci:

 // get span.dataset.info; // 123
span.dataset.index; // 2
// set span.dataset.prefix = "M.";
span.dataset.emojiicon = "?";

Notez la nomenclature de chameau dans la dernière ligne. Il convertit automatiquement l'attribut de style kebab dans HTML (tel que data-this-little-piggy ) à la nomenclature de camel en javascript (comme dataThisLittlePiggy ).

Cette API n'est sans doute pas aussi bonne que classList , classList a des méthodes claires pour ajouter, supprimer, changer et remplacer, mais c'est mieux que rien.

Vous pouvez également accéder aux ensembles de données en ligne:

Données JSON dans les propriétés des données

pourquoi pas? C'est juste une cha?ne qui peut être formatée en JSON valide (notez les citations, etc.). Vous pouvez extraire les données et les analyser au besoin.

 const el = document.QuerySelector ("li");
Soit JSON = el.dataset.person;
LET DATA = JSON.Parse (JSON);
console.log (data.name); // Chris Coyier
console.log (data.job); // Person du Web

Cas d'utilisation JavaScript

Le concept est que vous pouvez utiliser les propriétés de données pour mettre des informations dans HTML, à laquelle JavaScript peut avoir besoin d'accéder afin d'effectuer certaines opérations.

Un exemple courant est lié à la fonctionnalité de la base de données. Supposons que vous ayez un bouton "like":

?

Ce bouton peut cliquer sur Handler, qui effectue des demandes AJAX au serveur lorsqu'il est cliqué pour incrémenter le nombre de likes dans la base de données. Il sait quel enregistrement à jour car il les tire des propriétés de données.

spécification

• Niveau 4 du sélecteur (projet de travail)
• Niveau de sélecteur 3 (recommandé)
• Sélecteur Niveau 2, révision 1 (définition initiale)

Support de navigateur

Ce navigateur prend en charge les données de Caniuse, qui contient plus de détails. Le nombre indique que le navigateur prend en charge cette fonctionnalité dans cette versions et ultérieures.

bureau

PC mobile / tablette