Home  >  Article  >  Web Front-end  >  How to use the new HTML5 feature dataset

How to use the new HTML5 feature dataset

巴扎黑
巴扎黑Original
2017-09-02 10:11:512073browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn