data* H5新特性

data-*全局属性是一种被称为自定义数据属性的属性, 它赋予所有HTML元素上嵌入自定义数据属性的能力,并可以通过脚本在HTML与DOM表现之间进行专有数据的交换。
*可以使用遵循xml名称生产规则的任何名称来被替换,并具有以下限制:

  • 该名称不能以xml开头,无论这些字母是大写还是小写;
  • 该名称不能包含任何分号(U+003A);
  • 该名称不能包含A至Z的大写字母。
    注意:HTMLElement.dataset(en-US)属性是一个DOMStringMap,并且自定义数据属性data-test-valule可以通过HTMLElement.dataset.testValue(或者是HTMLElement.dataset["testValue"])来访问,任何破折号都会被下个字母的大写替代(驼峰拼写)。

用法

通过添加data-*属性,即使普通的HTML元素也能变成相当复杂且强大的编程对象。

<img class="spaceship cruiserX3" src="shipX3.png"
  data-ship-id="324" data-weapons="laserI laserII" data-shields="72%"
  data-x="414354" data-y="85160" data-z="31940"
  onclick="spaceships[this.dataset.shipId].blasted()">
</img>

image

image

原文地址:https://www.cnblogs.com/huayang1995/p/15774534.html