在标记上添加丰富的上下数据

HTML5具备了在页面上存储数据的能力。

自定义数据属性标记具备了添加丰富且深入的数据能力，这是以前做不到的。自定义数据属性，一般标记为data-*属性，是一种将上下文数据到添加到html5标记

的简单方式。只要将data-*开头的属性名添加到任意html标签上即可：

<div>
     <li class="auto" data-make="toyota" data-bodytype="sedan" data-year="2005">this is text</li>
</div>

 

数据访问

html5 元素都有一个dataset对象，它通过名字访问对应自定义数据：

<div id="mynode" data-myvalue="true">my node</div>

//javascript 访问

 

var nodevalue=document.getElementbyid("mynode").dataset.myvalue

//nodevalue = "true"

注意我们不需要在数据前加“data-”,只需要直接调用数据的名字即可。这个访问方法很不错并且符合规范，但是和其他html5功能一样，只有一些html5

浏览器实现了这个方法。

<div id="mynode" data-myvalue="true">my node</div>

/*css declaration*/
#mynode[data-myvalue]{
  color:red;
}

或这样

＃mynode[data-myvalue='true']{
   color:red
}

现在css可以根据是否在存在自定义数据属性或者自定义数据的值来修改元素样式。