Html5 自定义数据属性

html5 可以为元素添加自定义属性,但是要添加前缀data-。(下面这个例子中的自定义属性的命名,其实是不规范的,不应该包含大写字符,例如:data-myName 应改命名为:data-myname. 应为我们在维护别人的代码,所以就会遇到如下的问题。)

  <div class="disabled myClass" id="mDiv" data-appId='12456' data-myName="mDiv">class test</div>

定义好属性之后该如何访问属性呢,有两种方式:1.通过元素的dataset 属性来直接访问属性值。这也就是可能会有问题的地方!!! 使用下面的代码执行不成功。

                var div = document.getElementById("mDiv");
                alert(div.dataset.appId);//undefined
                alert(div.dataset.myName);//undefined

正确的代码:

                var div = document.getElementById("mDiv");
                alert(div.dataset.appid);//123456
                alert(div.dataset.myname);//mDiv

为了省去不必要的麻烦,推荐做法 是使用getAttribute() 自己来取值(俗话说自己动手丰衣足食):

var div = document.getElementById("mDiv");
var temp = div.getAttribute("data-appId");
 alert(temp);//123456

 <b>test</b>

原文地址:https://www.cnblogs.com/bg57/p/4062281.html