vlambda博客
学习文章列表

后台回复【抽奖】

即可参加送书活动喔

HTML5规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。

这些属性可以任意添加、随便命名，只要以data-开头即可，来看一个例子。

 
   
   
 

  
    
    
  
<div id=“myDiv” data-appId=“12345” data-myname=“Nicholas”></div>
 
   
   
 

添加了自定义属性之后，可以通过元素的dataset属性来访问自定义属性的值。

dataset属性的值是DOMStringMap的一个实例，也就是一个名值对儿的映射。  

在这个映射中，每个data-name形式的属性都会有一个对应的属性，只不过属性名没有data-前缀（比如，自定义属性是data-myname，那映射中对应的属性就是myname），还是看一个例子吧。  

 
   
   
 

  
    
    
  
var div = document.getElementById(“myDiv”);

//取得自定义属性的值

var appId = div.dataset.appId;

var myName = div.dataset.myname;

//设置值

div.dataset.appId = 23456;

div.dataset.myname = “Michael”;
 
   
   
 

如果需要给元素添加一些不可见的数据以便进行其他处理，那就要用到自定义数据属性。