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’)来读取对应数据,这时如果遇见大写,则全部转化为小写

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页