Maison > interface Web > Tutoriel H5 > le corps du texte

Données HTML5 - * partage d'exemples d'attributs personnalisés

小云云
Libérer: 2018-01-27 10:15:49
original
1465 Les gens l'ont consulté

Cet article présente principalement les informations pertinentes sur l'explication détaillée des attributs personnalisés HTML5 data-* L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Dans attr et prop de jQuery, il a été mentionné qu'une utilisation inappropriée de la propriété dans les versions antérieures à IE9 entraînerait des fuites de mémoire, et la différence entre Attribut et Propriété est également un casse-tête En HTML5, data- * pour personnaliser les attributs. . Ce qu'on appelle data-* est en fait le préfixe data- plus le nom de l'attribut personnalisé. Les données peuvent être stockées en utilisant cette 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 sur la balise de l'élément HTML


<p id="test" data-age="24">
        Click Here
    </p>
Copier après la connexion

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 dataset, qui est une collection de paires clé-valeur de type DOMStringMap.


var test = document.getElementById(&#39;test&#39;);
        test.dataset.my = &#39;Byron&#39;;
Copier après la connexion

De cette façon, un attribut personnalisé de data-my est ajouté à p. Il y a deux choses à prendre en compte lors de l'utilisation de JavaScript pour faire fonctionner un 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

<. 🎜> comme tout à l'heure Le code ajoute du contenu


<style type="text/css">
        [data-birth-date]
        {
            background-color: #0f0;
            width:100px;
            margin:20px;
        }
    </style>
Copier après la connexion


De cette façon, nous définissons la date de naissance des données attribut personnalisé via JavaScript, dans La feuille de style CSS ajoute quelques styles à p, jetez un œil à l'effet
test.dataset.birthDate = &#39;19890615&#39;;
Copier après la connexion

est également lu l'objet dataset, en utilisant "." Pour obtenir les attributs, vous devez également supprimer le préfixe data- et les traits d'union doivent être convertis en dénomination de cas de chameau


var test = document.getElementById(&#39;test&#39;);
        test.dataset.my = &#39;Byron&#39;;
        test.dataset.birthDate = &#39;19890615&#39;;
        test.onclick = function () {
            alert(this.dataset.my + ' ' + this.dataset.age+' '+this.dataset.birthDate);
        }
Copier après la connexion

getAttribute/ setAttribute

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 = &#39;19890615&#39;;
        test.setAttribute('age', 25);
        test.setAttribute('data-sex', 'male');

        console.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); //male
Copier après la connexion

De cette façon, nous pouvons voir que tous deux définissent l'attribut sur attribut ( non-sens, sinon ils peuvent l'appeler un attribut personnalisé), c'est-à-dire que getAttribute/ setAttribute peut exploiter tous les contenus de l'ensemble de données. Le contenu de l'ensemble de données n'est qu'un sous-ensemble d'attributs. La particularité est la dénomination, mais il n'y a que des attributs avec des données. préfixe dans l'ensemble de données (il n'y en a pas d'âge = 25).

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

Compatibilité des navigateurs

La mauvaise nouvelle est que la compatibilité des navigateurs de data-* est très peu optimiste

Internet Explorer 11 +
  1. Chrome 8+
  2. Firefox 6.0+
  3. Opera 11.10 +
  4. Safari 6+
  5. Parmi eux, IE11+ aveugle simplement mes amis. Il semble qu'il y ait un long chemin à parcourir pour utiliser pleinement cet attribut. Yuan 矣
Recommandations associées :


Quel est l'attribut personnalisé data-* de HTML5

Comment l'insérer H5 et définition des propriétés personnalisées

Explication détaillée du code du modèle d'objet des propriétés et méthodes personnalisées JavaScript

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal