自定义数据属性(例如data-ab或data-abc)能够被指定在任意HTML元素上,来储存特定于页面的不可见数据自定义数据。
属性名不应该包含任何大写字母
以字符串“data-”开头都是自定义属性。
自定义属性值可以是任意字符串。
html5提供对元素的data-*属性,是为了方便存取功能。在javascript和jquery在需要读取或者设置元素的值时,在使用date-*属性关联时编写的代码更少,更容易读懂。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>炫代码(www.xuandaima.com)</title> <script> function showDetails(animal) { var animalType = animal.getAttribute("data-animal-type"); alert(animal.innerHTML + "是一个" + animalType + "。"); } </script> </head> <body> <h1>王者荣誉</h1> <p>左键点击某个英雄姓名来查看其英雄类别:</p> <ul> <li onclick="showDetails(this)" data-animal-type="射手类英雄">鲁班</li> <li onclick="showDetails(this)" data-animal-type="法师类英雄">诸葛亮</li> <li onclick="showDetails(this)" data-animal-type="刺客类英雄">荆轲</li> </ul> </body> </html>
<元素名 data-*="任何字符串">