Explication détaillée des données d'attributs personnalisés de H5-*

HTML5 ajoute une nouvelle fonctionnalité appelée attributs de données personnalisés, qui sont des attributs personnalisés data-*. En HTML5, nous pouvons utiliser data- comme préfixe pour définir les attributs personnalisés dont nous avons besoin pour stocker certaines données

Bien entendu, les navigateurs avancés peuvent définir et accéder aux données via des scripts. Très utile dans la pratique du projet.

Par exemple :

Le code est le suivant :

63a8e42746506f26232a231738fd6c94

Utilisez la méthode d'attribut pour accéder aux données -* la valeur d'un attribut personnalisé

Il est très pratique d'utiliser la méthode des attributs pour accéder à la valeur de l'attribut personnalisé data-* :

Le code est le suivant :

 // 使用getAttribute获取 data- 属性

  var user = 
document
 . getElementById ( 'user' ) ;

  var userName = plant . getAttribute ( 'data-uname' ) ; // userName = '脚本之家'

  var userId = plant . getAttribute ( 'data-uid' ) ; // userId = '12345'

  // 使用
set
Attribute设置 data- 属性

  user . setAttribute ( 'data-site' , 'http://www.jb51.net' ) ;

Cette méthode peut fonctionner normalement dans tous les navigateurs modernes, mais ce n'est pas le but des attributs data-* personnalisés de HTML 5, sinon elle ne sera pas différente des attributs personnalisés que nous avons utilisés auparavant, par exemple :

Le code est la suivante :

 <p id = "user" uid = "12345" uname = "脚本之家" > </p>

  <script>

  // 使用getAttribute获取 data- 属性

  var user = document . getElementById ( &#39;user&#39; ) ;

  var userName = plant . getAttribute ( &#39;uname&#39; ) ; // userName = &#39;脚本之家&#39;

  var userId = plant . getAttribute ( &#39;uid&#39; ) ; // userId = &#39;12345&#39;

  // 使用setAttribute设置 data- 属性

  user . setAttribute ( &#39;site&#39; , &#39;http://www.jb51.net&#39; ) ;

  </script>

Cet attribut personnalisé « original » n'est pas différent de l'attribut personnalisé data-* ci-dessus, mais le nom de l'attribut de connaissance est différent.

L'attribut dataset accède à la valeur de l'attribut personnalisé data-*

Cette méthode accède à l'attribut personnalisé data-* en accédant à l'attribut dataset d'une valeur d'élément. . Cet attribut d'ensemble de données fait partie de HTML5 JavaScript API et est utilisé pour renvoyer un DOMStringMapObjet.

Lors de l'utilisation de cette méthode, au lieu d'utiliser le nom complet de l'attribut, tel que data-uid, pour accéder aux données, le préfixe data- doit être supprimé.

Une autre remarque spéciale est : si le nom de l'attribut data contient des traits d'union, par exemple : data-

date-of-birth, les tirets seront supprimés et convertis en cas de chameau. Nom de la formule, le nom de l'attribut précédent doit être : dateOfBirth après la conversion.

Le code est le suivant :

 <p id="user" data-id="1234567890" data-name="脚本之家" data-date-of-birth>码头</p>
  <script type="text/javascript">
  var el = document.querySelector(&#39;#user&#39;);
  console.log(el.id); // &#39;user&#39;
  console.log(el.dataset);//一个DOMStringMap
  console.log(el.dataset.id); // &#39;1234567890&#39;
  console.log(el.dataset.name); // &#39;脚本之家&#39;
  console.log(el.dataset.dateOfBirth); // &#39;&#39;
  el.dataset.dateOfBirth = &#39;1985-01-05&#39;; // 设置data-date-of-birth的值.
  console.log(&#39;someDataAttr&#39; in el.dataset);//false
  el.dataset.someDataAttr = &#39;mydata&#39;;
  console.log(&#39;someDataAttr&#39; in el.dataset);//true
  </script>

Si vous souhaitez supprimer un attribut de données, vous pouvez faire ceci : supprimer el id ou el .dataset id =. nul ; .

C'est magnifique, haha, mais malheureusement, le nouvel attribut d'ensemble de données n'est implémenté que dans Chrome 8+ Firefox (Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+, il est donc il est préférable d'utiliser getAttribute et setAttribute pour fonctionner pendant cette période.

À propos des données-Sélecteur d'attributs

Dans le développement réel, cela peut vous être utile, vous pouvez personnaliser les données en fonction des éléments liés à la sélection d'attributs . Par exemple, utilisez querySelector

All pour sélectionner des éléments :

Le code est le suivant :

// Sélectionne tous les éléments contenant l'attribut 'data-flowering'
document . querySelectorAll ( '[data-flowering]' ) ;

//Sélectionnez tous les éléments contenant la valeur de l'attribut 'data-text-colour' de rouge
document . querySelectorAll ( '[data-text-colour="red"]' ) ;

De même, nous pouvons également définir des styles CSS pour les éléments correspondants via la valeur de l'attribut data-, comme dans l'exemple suivant :

Le code est le suivant :

 <style type ="text/css">

  .user {

  
width
 : 256px ;

  
height
 : 200px ;

  }

  .user[data-name=&#39;feiwen&#39;] {

  color : brown

  }

  .user[data-name=&#39;css&#39;] {

  color : red

  }

  </style>

  <p 
class
 = "user" data-id = "123" data-name = "feiwen" > 1 </p>

  <p class = "user" data-id = "124" data-name = "css" > 码头 </p>

[Recommandations associées 】

1.

Tutoriel vidéo gratuit HTML5

2

Explication détaillée des attributs de l'événement H5

3. .

Explication détaillée de 28 nouvelles fonctionnalités très importantes, nouvelles techniques et nouvelles technologies de H5

4

Démonstration de code pour créer une minuterie en H55.

H5 exemple détaillé de réalisation de plusieurs téléchargements d'images

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!