How to use the new HTML5 feature dataset

This article mainly introduces the use of HTML5 custom attribute prefix data- and dataset (new features of html5). Friends in need can refer to the following

HTML5 stipulates that non-standard attributes can be added to elements. But add the prefix data- in order to provide the element with information that is not related to rendering, or to provide semantic information. These attributes can be added arbitrarily and named arbitrarily, as long as they start with data-. After adding the custom attribute, the value of the custom attribute can be accessed through the dataset attribute of the element.

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

The above is the detailed content of How to use the new HTML5 feature dataset. For more information, please follow other related articles on the PHP Chinese website!