HTML5 data-* 数据处理

转载于 2019-03-07 13:54:46 发布 · 686 阅读

前端专栏收录该内容

27 篇文章

订阅专栏

本文介绍HTML5中使用data-*属性为元素添加额外的非视觉性信息，并通过原生JavaScript获取这些属性值的方法。展示了如何利用dataset属性访问data-*属性，包括直接读取和使用getAttribute方法。

HTML5中的设置，如：

<body>
    <div data-num="1" onclick="es(this)">1</div>
    <div data-num="2" onclick="es(this)">2</div>
    <div data-num="3" onclick="es(this)">3</div>
    <div data-num="4" onclick="es(this)">4</div>
</body>

原生获取的方法：

    function es(_this){
        console.log(_this)
        console.log(_this.getAttribute("data-num"))  //1
        console.log(_this.dataset)                   //{num:1}
        console.log(_this.dataset.num)               //1
    }