Attributs personnalisés data-* de HTML5

HTML5 ajoute une nouvelle fonctionnalité, qui est l'attribut de données personnalisé, qui est l'attribut personnalisé 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, la définition et l'accès aux données peuvent être effectués via des scripts dans des navigateurs avancés. Très utile dans la pratique du projet. Il existe actuellement de nombreux frameworks qui adoptent cette approche, et le plus courant est jQueryMobile.
Les exemples d'utilisation spécifiques sont les suivants :

<p id = "head" data-home = "http://blog.csdn.net/xmtblog" data-author = "伪专家"></p>

Dans l'approche traditionnelle, nous pouvons l'utiliser avec jquery, comme suit :

$("#head").attr("data-home");  
$("#head").attr("data-home","new");

Ou l'approche pure js :
Dans IE Dans le navigateur, nous pouvons l'appeler directement après avoir récupéré l'objet

document.getElementById("head").["data-home"];  
document.getElementById("head").["data-home"] = "new";

Dans Firefox et Google Chrome, nous pouvons l'appeler via la méthode getAttribute :

document.getElementById("head").getAttribute("data-home");  
document.getElementById("head").setAttribute("data-home","new");

Dans Méthode d'opération simple en HTML5 : (l'attribut dataset accède à la valeur de l'attribut personnalisé data-*)
Cette méthode accède à la valeur de l'attribut personnalisé data-* en accédant à l'attribut dataset d'un élément. L'attribut dataset fait partie de l'API JavaScript HTML5 et est utilisé pour renvoyer un objet DOMStringMap avec les attributs data de tous les éléments sélectionnés.
Lors de l'utilisation de cette méthode, au lieu d'utiliser le nom complet de l'attribut, tel que data-home, pour accéder aux données, le préfixe data- doit être supprimé.
Une autre chose à noter est que si le nom de l'attribut de données contient un trait d'union, par exemple : data-date-of-birth, le trait d'union sera supprimé et converti en dénomination de cas de chameau. Le nom d'attribut précédent sera converti en nom de cas de chameau. la fin devrait être : dateOfBirth.

<p id = "head" data-home = "http://blog.csdn.net/xmtblog" data-author = "伪专家" data-date-of-birth>QQ群：135430763</p>  <script type="text/javascript">  
    var el = document.querySelector(&#39;#head&#39;);  
    console.log(el.id);   
    console.log(el.dataset);//一个DOMStringMap  
    console.log(el.dataset.home);   
    console.log(el.dataset.author);   
    console.log(el.dataset.dateOfBirth);   
    el.dataset.dateOfBirth = &#39;1985-01-05&#39;; // 设置data-date-of-birth的值.  
    //判断属性  
    console.log(&#39;testAttr&#39; in el.dataset);//false  
    el.dataset.testAttr = &#39;testAttr&#39;;  
    console.log(&#39;testAttr&#39; in el.dataset);//true  </script>

Si vous souhaitez supprimer un attribut de données, vous pouvez faire ceci : delete el.dataset.home ; ou el.dataset.home = null ;.
N'est-ce pas très pratique de fonctionner comme ça ? Mais certains navigateurs ne le prennent pas encore en charge. Par conséquent, pendant cette période, il est préférable d'utiliser getAttribute et setAttribute pour le faire fonctionner ou l'utiliser avec jquery.
Sélecteur d'attributs de données
Pendant le développement réel, les éléments pertinents peuvent être sélectionnés en fonction d'attributs de données personnalisés. Par exemple, utilisez querySelectorAll pour sélectionner des éléments :
//Sélectionnez tous les éléments contenant l'attribut 'data-p'
document.querySelectorAll ('[data-p]')
//Sélectionnez tous les éléments contenant l'attribut 'data-a' -href' Éléments avec la valeur d'attribut rouge
document.querySelectorAll ('[data-a-href="#"]')
De même, nous pouvons également définir CSS sur le correspondant élément via la valeur d'attribut de données Style, comme dans l'exemple suivant :

<style type ="text/css">  
    .head {  
         width : 256px ;  
         height : 200px ;  
     }  

    .head[data-a=&#39;btn-a&#39;] {  
         color : brown  
    }  

    .head[data-a=&#39;btn-color&#39;] {  
         color : red  
    }  
</style>  
<p class = "head" data-qq = "7" data-a = "btn-a" > button按钮 </p>  
<p class = "head" data-qq = "1" data-a = "btn-color" > button按钮</p>

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!