H5新增的自定义属性

写法：前缀data-自定义属性名="属性值" ，例如：data-user="zhangsan"

1、可以直接在标签行内定义

<div class="box" data-user="zhangsan">
    box盒子
</div>

2、在js脚本中存取自定义属性，用到两个方法分别是存——setAttribute("自定义属性名"，"属性值")和取——getAttribute("自定义属性名")

代码示例：

<div class="box">
    box盒子
</div>

<script>
    //获取box盒子
    var box = document.querySelector(".box")
    //给它添加一个自定义属性
    box.setAttribute("data-user","zhangsan")
    //取到定义的自定义属性
    box.getAttribute("data-user")
</script>

3、在js脚本中利用dataset存取自定义属性，这个 dataset 属性是HTML5 JavaScript API的一部分，用来返回一个所有选择元素 data- 属性的DOMStringMap对象。

注意:

在使用dataset时，我们的属性名不需要再加前缀data-,如 data-user 来存取数据，应该去掉data- 前缀。

 data- 属性名如果包含了连字符，例如：data-date-of-birth ，浏览器解析时连字符将被去掉，并转换为驼峰式的命名，前面的属性名转换后应该是： dateOfBirth 。

代码示例：

<div class="box" data-user="zhangsan" data-age="20">
    box盒子
</div>

<script>
    //获取box盒子
    var box = document.querySelector(".box")
    //得到data-user
      var user =  box.dataset.user
    //得到data-age
    var age= box.dataset.age

    //设置新的自定义属性
    box.dataset.render="xx"//属性值
    
</script>