Résumé des méthodes d'utilisation des attributs data-* dans H5

Cette fois, je vais vous apporter un résumé de la façon d'utiliser l'attribut data-* dans H5. Quelles sont les précautions lors de l'utilisation de l'attribut data-* dans H5. Ce qui suit est un cas pratique, jetons un coup d'oeil.

1. À propos des caractéristiques des éléments html

1 Il existe certaines caractéristiques standards des éléments html :

id. element L'identifiant unique dans le document ;

title Informations explicatives supplémentaires sur l'élément, généralement affichées via la info-bulle

lang Le code de langue du contenu de l'élément ; , très rarement utilisé ;

direction du langage dir, rarement utilisé

className, correspondant à l'attribut class de l'élément, compte tenu du conflit avec la classe de mots réservés ECMAScript, ainsi nommé className ;

setAttribute() définit les attributs associés ; removeAttribute() supprime les attributs associés

3. attributs La différence dans l'obtention des attributs des éléments :

Par exemple :

Dans l'exemple de cet article, deux méthodes sont démontrées pour obtenir les caractéristiques standards et les caractéristiques personnalisées d'éléments HTML. On peut constater que :

getAttribute() peut accéder à la fois aux fonctionnalités standard et aux fonctionnalités personnalisées, mais lors de l'accès aux fonctionnalités de l'élément HTML en utilisant les attributs de l'élément DOM lui-même, il ne peut accéder qu'aux fonctionnalités standard.

var header=document.getElementById('header');
console.log(header.id);//header
console.log(header.getAttribute('id'));//header
console.log(header.title);//test
console.log(header.getAttribute('title'));//test
console.log(header.myTitle);//undefined
console.log(header.getAttribute('myTitle'));//monster1935

Cause :

Seuls les attributs standards de l'élément html seront ajoutés à l'objet DOM sous forme d'attributs.

Cas particulier :

a deux types d'attributs Bien qu'il existe des noms d'attribut correspondants dans l'objet DOM, la valeur de l'attribut est différente de la valeur renvoyée par. getAttribute() Ce n'est pas pareil.

1. Fonctionnalités de style : Lors de l'utilisation des attributs d'objet DOM pour accéder au style, un objet est renvoyé, tandis que lorsqu'il est obtenu à l'aide de la méthode getAttribute(), le texte CSS est renvoyé.

2.

Programme de traitement d'événements

(par exemple : onclick) :

Lors de l'utilisation des attributs de l'objet DOM pour accéder, une fonction JavaScript est renvoyée, et via getAttribute () Ce qui est renvoyé lorsque la méthode est obtenue est du code Javas.

Utilisation :

Utilisez uniquement la méthode getAttribute() lors de l'obtention d'attributs personnalisés. Lors de l'utilisation du DOM, utilisez les attributs de l'objet pour les obtenir.

2. Attributs personnalisés en Html5

1. La spécification Html5 stipule que les attributs personnalisés doivent être préfixés par data-, afin de fournir des informations sans rapport avec le rendu.

2. Utilisez la méthode getAttribute() et la méthode setAttribute() pour utiliser les attributs personnalisés. Par exemple :

L'exemple ci-dessus montre l'utilisation des méthodes getAttribute() et setAttribute() pour exploiter les attributs personnalisés des éléments HTML.

3. Utiliser un ensemble de données pour utiliser des attributs personnalisés

var user=document.getElementById('user');
//使用attributes方法操作属性
//获取相关属性值
var name=user.getAttribute('data-name');
console.log(name)//monster1935
var age = user.getAttribute('data-age');
console.log(age);//123
//设置相关属性值
user.setAttribute('data-sex','male');
console.log(user.getAttribute('data-sex'));//male

Par exemple :

L'exemple ci-dessus montre l'utilisation d'attributs d'ensemble de données pour utiliser des attributs personnalisés. La valeur de l'attribut dataset est un exemple de DOMStringMap, qui est une carte de paires nom-valeur. Dans ce mappage, chaque attribut sous la forme de nom de données a un attribut correspondant. La différence est qu'il n'y a pas de préfixe de données dans le nom de l'attribut. (Par exemple, si l'attribut personnalisé est data-name, l'attribut correspondant dans le mappage est name Une autre chose à noter est que si le nom de l'attribut de données contient des tirets (par exemple : data-date-of-). Birth ), l'attribut correspondant dans le mappage est dateOfBirth, qui est converti au format de boîtier de chameau correspondant pour l'affichage.

var el=document.querySelector('#user');
console.log(el.id);
console.log(el.dataset); //返回的是一个DomStringMap对象
console.log(el.dataset.name);
console.log(el.dataset.age);
// 设置相关属性
el.dataset.home="shandong";
console.log(el.dataset);
// 删除相关属性
// delete el.dataset.home;
el.dataset.home = null;
console.log(el.dataset);

4. Problèmes de compatibilité avec l'attribut de l'ensemble de données

5. Sélecteur d'attribut

Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+

1.获取相关DOM元素

var elem=document.querySelectorAll("[data-name='monster1935']");

2.设置相关css样式

<style>
  p{
    width:100px;
    height:200px;
    margin:20px;
  }
  p[data-name="monster"]{
    background-color: green;
  }
  p[data-name="monster1935"]{
    background-color: red
  }
</style>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎么实现JS同步、异步、延迟加载

怎样使用@angular/cli V6.0开发PWA应用

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!