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 :

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 DOMStringMap<🎜 de toutes les données d'éléments sélectionnés. attributs >Objet.

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.

 <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>

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

All pour sélectionner des éléments :

// 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 :

 <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>

Tutoriel vidéo gratuit HTML5

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

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

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

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!