Heim >Web-Frontend >H5-Tutorial >So verwenden Sie das Präfix data-attribute und dataset

So verwenden Sie das Präfix data-attribute und dataset

php中世界最好的语言
php中世界最好的语言Original
2018-03-27 10:08:142663Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie das Präfix-Daten-Attribut und das Daten-Set verwenden. Welche Vorsichtsmaßnahmen gibt es bei der Verwendung des Präfix-Daten-Attributs? und Datensatz? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

HTML5 legt fest, dass nicht standardmäßige Attribute zu Elementen hinzugefügt werden können, denen jedoch data- vorangestellt werden kann, um Informationen für das Element bereitzustellen, die nicht mit dem Rendering zusammenhängen, oder um Semantik bereitzustellen Information. Diese Attribute können beliebig hinzugefügt und benannt werden, solange sie mit data- beginnen. Nach dem Hinzufügen des benutzerdefinierten Attributs kann über das Datensatzattribut des Elements auf den Wert des benutzerdefinierten Attributs zugegriffen werden.

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum Thema PHP chinesische Website!

Empfohlene Lektüre:

Ausführliche Erklärung der Drag-and-Drop-Funktion von H5

Der Canvas von H5 erstellt einen kreisförmigen Fortschrittsbalken und zeigt ihn an it Numerischer Prozentsatz

Detaillierte Erläuterung der lokalen Speichernutzung von H5s LocalStorage

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Präfix data-attribute und dataset. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn