浅析Html5 data-*自定义属性

通常我们会通过使用getAttribute或者setAttribute来操作页面属性，然而在Html5中为我们提供了新的自定义属性方法，极大的方便了我们操作页面属性，并且我们可以使用自定义属性在某些情况下来进行数据存储。

使用方法

我们可以直接在html标签中设置自定义属性，例如：

<div class="taodet-02">
    <span>
        <button>{{itemlist.item_quan}}</button>
    </span>
    <span class="mui-icon" @tap="share" :data-num="123">//自定义属性：data-num
    <img src="img/share.png"/>
    </span>
</div>

当然，我们也可以直接使用JS来设置自定义属性。HTML5中元素有一个dataset的属性，这是一个DOMStringMap类型的键值对集合，我们可以通过使用JS来操作dataset来达到我们的目的。例如我们给class类名为mui-icon的标签同样设置自定义属性data-num：

let test = document.getElementsByClassName('mui-icon')[0];
test.dataset.num = '123';//设置成功

如果希望使用JS来获取我们设置好的自定义属性，仍然可以通过dataset对象来获取我们所需要的自定义属性，例如：

let test = document.getElementsByClassName('mui-icon')[0],
    num = test.dataset.num;
    console.log(num);//输出的num数值为123

注意事项

1.如果我们需要通过JS设置或者获取一个类似data-index-num = '123'的自定义属性时，我们需要把index-num转为驼峰命名，例如：

let test = document.getElementsByClassName('mui-icon')[0];
test.dataset.indexNum = '123';//设置成功,index-num需要转为indexNum

2.data自定义属性目前兼容性仍然很感人，虽然最新的主流浏览器基本都支持这个属性，但是老版本的浏览器仍然是个深坑，因为使用的时候还需要酌情考虑一下。

查看更多文章请点击进入我的个人博客