Guide des attributs de données HTML

Table des matières

1. Introduction
2. grammaire
3. Style à l'aide d'attributs de données
4. Accéder aux propriétés de données en javascript

Introduction

Les éléments HTML peuvent avoir des attributs utilisés à quelque fin que ce soit, des informations d'accessibilité au contrôle de style.

<div aria-label="Names" role="region"></div>

L'approche non consangée consiste à créer vos propres propriétés ou à réutiliser les propriétés existantes pour les fonctionnalités non liées.

<div highlight="true"></div>
<div width="large"></div>

Il y a beaucoup de mauvaises raisons pour cela. Votre HTML deviendra invalide, qui peut ne pas avoir d'effets négatifs réels, mais perdra cette sensation de HTML efficace et floue. La raison la plus convaincante est que le HTML est un langage en évolution, et le simple fait que les propriétés et les valeurs qui ne fonctionnent pas aujourd'hui ne signifient pas qu'elles ne fonctionneront jamais à l'avenir.

La bonne nouvelle est: vous pouvez créer vos propres propriétés. Il vous suffit de les préfixer avec data-* et vous pouvez faire ce que vous voulez!

grammaire

Il est très pratique de pouvoir créer vos propres attributs HTML et de y mettre vos propres informations. Heureusement, vous pouvez le faire! C'est pour cela que les attributs de données sont utilisés. Ils ressemblent à ceci:

<div data-foo=""></div>
<div data-size="large"></div>

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 id="Exemple-d-utilisation-du-style"> 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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!