html5 data-* attributs qui stockent des données personnalisées privées pour une page ou une application

Exemple

Utiliser les attributs data-* pour intégrer des données personnalisées :

<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li> 
<li data-animal-type="spider">Tarantula</li> 
</ul>

Prise en charge des navigateurs

IE, Firefox, Chrome, Safari, Opera

Tous les principaux navigateurs prennent en charge les attributs data-*. Les attributs

Définition et utilisation

data-* sont utilisés pour stocker des données privées personnalisées pour une page ou une application. Les attributs

data-* nous donnent la possibilité d'intégrer des attributs de données personnalisés sur tous les éléments HTML.

Les données stockées (personnalisées) peuvent être exploitées dans le JavaScript de la page pour créer une meilleure expérience utilisateur (sans effectuer d'appels Ajax ni de requêtes de base de données côté serveur).

Les attributs data-* se composent de deux parties :

• Le nom de l'attribut ne doit contenir aucune lettre majuscule et il doit y avoir au moins un caractère après le préfixe "data -"

• La valeur de l'attribut peut être n'importe quelle chaîne

Remarque : les agents utilisateurs ignoreront complètement les attributs automatiques préfixés par "data-" Définir les propriétés.

Les différences entre HTML 4.01 et HTML5

les attributs data-* sont nouveaux en HTML5.

Syntaxe

<element data-*="somevalue">

Valeur de l'attribut

值	描述
somevalue	规定属性的值（以字符串）。

Comme mentionné dans l'attr et la prop de jQuery, si vous utilisez la propriété dans les versions antérieures IE9 Une mauvaise utilisation entraînera des fuites de mémoire, et la différence entre Attribut et Propriété est également un casse-tête. Dans HTML5, la méthode data-* est ajoutée pour personnaliser les attributs. Ce qu'on appelle data-* est en fait le préfixe data- plus un attribut personnalisé. nom, les données peuvent être stockées en utilisant une telle structure. L'utilisation de data-* peut résoudre la situation actuelle des attributs personnalisés déroutants et non gérés.

Méthodes de lecture et d'écriture

data-* a deux méthodes de paramétrage Vous pouvez écrire directement les données dans

sur l'

<div id="test" data-age="24">
        Click Here
    </div>

élément HTML

. tag. -age est un attribut personnalisé. Bien sûr, nous pouvons également l'utiliser via JavaScript. Les éléments en HTML5 auront un attribut de jeu de données, qui est une collection de paires clé-valeur du type DOMStringMap

var test = document.getElementById('test');
        test.dataset.my = 'Byron';

Cela ajoute un attribut personnalisé de data-my au div

Il y a deux choses à prendre en compte lors de l'utilisation de JavaScript pour faire fonctionner l'ensemble de données

1 Nous devons le faire lors de l'ajout ou de la lecture. attributs Supprimez le préfixe data-* Comme dans l'exemple ci-dessus, nous n'utilisons pas le formulaire test.dataset.data-my = 'Byron';.

2. Si le nom de l'attribut contient également un trait d'union (-), il doit être converti en dénomination en casse chameau. Mais si un sélecteur est utilisé en CSS, nous devons utiliser le format de trait d'union

<.>

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!