HTML标签中自定义data属性的使用

在实际开发中，有时候传输过来的数据需要在前端渲染的时候进行储存，那么这个时候就可以使用到HTML5中新增的data-自定义属性来存储需要的数据

例如这个标签中就利用自定义标签存储了需要的信息

<span class="float_left main_ul_span blue_hover" id="test" data-exam-id="AAA" onclick="check_exam(this.dataset.examId)">{
    
    {
    
    exam.name}}</span>

获取这个自定义属性的内容不能直接通过属性名获取，下面给出两种常用的获取方式：

1.通过HTML5提供的dataset获取

例如上面那段就可以这样:

var span=document.getElementById('test');
var value=span.dataset.examId;

看到这里可能就会有疑问了：我存储的是data-exam-id啊 不关名字对不上，大小写也不对啊
其实不然，无论是设置还是读取的时候，对于自定义属性，都会采取以下措施：

设置自定义属性的时候，遇见大写字母自动以‘-’分隔开，并把大写转化为小写
使用dataset获取的是data-之后的内容，并且遇见‘-’会自动去掉并转换对应字母为大写

2.通过js获取

而通过js中的Attribute获取和设置就和上述的转换规则不同了:

通过DOM.setAttrobute(‘data-name’,‘value’)来设置，在设置的过程中，遇见的大写全部转化为小写，并且不会中间添加‘-’分割

通过getAttribute(‘data-name’)来读取对应数据，这时如果遇见大写，则全部转化为小写