Comment utiliser l'attribut de données et l'ensemble de données du préfixe

Cette fois, je vais vous montrer comment utiliser le préfixe data-attribut et dataset Quelles sont les précautions lors de l'utilisation de l'attribut data-préfixe. et dataset ? , ce qui suit est un cas pratique, jetons un coup d'oeil.

HTML5 stipule que des attributs non standards peuvent être ajoutés aux éléments, mais préfixés par data- , afin de fournir des informations sur l'élément qui ne sont pas liées au rendu, ou de fournir une sémantique information. Ces attributs peuvent être ajoutés et nommés arbitrairement, à condition qu'ils commencent par data-. Après avoir ajouté l'attribut personnalisé, la valeur de l'attribut personnalisé est accessible via l'attribut dataset de l'élément.

<p id="box" data-name=&#39;ghostwu&#39; data-age=&#39;22&#39; , data-sex=&#39;man&#39;>ghostwu tell you how to learn html5</p>
    <script>
        var oBox = document.querySelector("#box");
        console.log( oBox.dataset ) ;
        var myName = oBox.dataset.name;
        var myAge = oBox.dataset.age;
        var mySex = oBox.dataset.sex;
        if( oBox.dataset.name ) {
            console.log( oBox.dataset.name );
        }
    </script>

Je pense que vous maîtrisez la méthode après avoir lu le cas présenté dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le sujet. Site Web chinois PHP !

Lecture recommandée :

Explication détaillée de la fonction glisser-déposer de H5

Le canevas de H5 crée une barre de progression circulaire et affiche it Pourcentage numérique

Explication détaillée de l'utilisation du stockage local du LocalStorage de H5

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!