How to use the prefix data-attribute and dataset

This time I will show you how to use the prefix data-attribute and dataset. What are the precautions when using the prefix data-attribute and dataset? , the following is a practical case, let’s take a look.

HTML5 It is stipulated that non-standard attributes can be added to elements, but the prefix data- must be added. The purpose is to provide information for the element that has nothing to do with 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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of H5’s drag and drop function

H5’s Canvas makes a circular progress bar and displays it Number percentage

H5’s LocalStorage local storage usage details

The above is the detailed content of How to use the prefix data-attribute and dataset. For more information, please follow other related articles on the PHP Chinese website!