Explication détaillée des données HTML5-* attributs personnalisés

Dans attr et prop de jQuery, il est mentionné qu'une utilisation inappropriée des propriétés dans les versions antérieures à IE9 entraînera des fuites de mémoire, et la différence entre Attribut et Propriété est également très gênante. En 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 nom d'attribut personnalisé. 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.

Il existe deux méthodes de configuration pour data-*, qui peuvent être écrites directement sur les balises d'éléments HTML.

 <div id=test data-age=24> Cliquez ici </div>

L'âge des données est un attribut personnalisé. Bien sûr, nous pouvons également l'exploiter 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é data-my au div. Il y a deux choses à prendre en compte lors de l'utilisation de JavaScript pour exploiter l'ensemble de données.

1. Nous devons supprimer le préfixe data-* lors de l'ajout ou de la lecture d'attributs. 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.

Ajoutez du contenu au code tout de suite

 <style type=text/css> [data-birth-date] { background-color: #0f0; width:100px margin:20px;

 test.dataset.birthDate = '19890615';

De cette façon, nous avons défini l'attribut personnalisé data-birth-date via JavaScript et ajouté quelques styles au div dans la feuille de style CSS pour voir l'effet.

Lors de la lecture, c'est également via l'objet dataset, en utilisant . pour obtenir les attributs. Le préfixe data- doit également être supprimé et les traits d'union doivent être convertis en dénomination de cas de chameau.

 var test = document.getElementById('test'); test.dataset.my = 'Byron'; test.dataset.birthDate = '19890615'; test.onclick = function () { alert(this.dataset.my + ' ' + this.dataset.age+' '+this.dataset.birthDate }

Certains étudiants peuvent demander s'il y a une différence entre ceci et getAttribute/setAttribute, à l'exception du nom.

 var test = document.getElementById('test'); test.dataset.birthDate = '19890615'; test.setAttribute('age', 25); test.setAttribute('data-sex', 'male'); log(test.getAttribute('data-age')); //24 console.log(test.getAttribute('data-birth-date')); //19890516 console.log(test.dataset.age); //24 console.log(test.dataset.sex);

À partir de cela, nous pouvons voir que les deux définissent des attributs sur des attributs (ce qui n'a aucun sens, sinon ils peuvent être appelés attributs personnalisés), ce qui signifie que getAttribute/setAttribute peut fonctionner sur tous les contenus de l'ensemble de données, et le contenu de l'ensemble de données n'est qu'un sous-ensemble d'attributs. la chose est la dénomination, mais il n'y a que des attributs avec le préfixe data- dans l'ensemble de données (il n'y en a pas pour age=25).

Alors pourquoi utilisons-nous encore data-* ? L'un des plus grands avantages est que nous pouvons gérer tous les attributs personnalisés de manière unifiée dans l'objet de l'ensemble de données. Il est très pratique de tout parcourir sans être dispersé, donc c'est toujours bon à utiliser.

La mauvaise nouvelle est que la compatibilité de data-* avec les navigateurs est très pessimiste.

1. Internet Explorer 11+
2. Chrome 8+
3. Firefox 6.0+
4. Opéra 11.10+
5. Safari 6+

Parmi eux, IE11+ aveugle tout simplement les yeux de mes amis. Il semble qu'il y ait un long chemin à parcourir pour utiliser pleinement cet attribut.

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.