HTML5中的自定义 data-* 属性

[LiuL0703]

当没有合适的属性和元素时，自定义的 data 属性是能够存储页面或 App 的私有的自定义数据 这个自定义data属性的用法非常的简单, 就是你可以往HTML标签上添加任意以 "data-"开头的属性, 这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的.

html5中data-*属性的定义

• data-* 属性用于存储页面或应用程序的自定义数据。
• data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
• 存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验

data-* 属性包括两部分

• 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
• 属性值可以是任意字符串

获取时通过dataset对象，使用"."来获取属性，需要去掉data-前缀。遇到自定义属性中有连字符需要转化为驼峰命名

<div id="day2-meal-expense"data-drink="coffee"data-food="sushi"data-meal="lunch">¥20.12</div>

var expenseday2 = document.getElementById('day2-meal-expense');
console.log(expenseday2.dataset.food);       // "sushi"
console.log(expenseday2.dataset.drink);      //  "coffee"
console.log(expenseday2.dataset.meal);      //  "lunch"

jquery获取

$('#day2-meal-expense').data('drink');

HTML5使用data-* 要注意的地方

• data-其后的属性名命名，发现如果为大写字母，则会转为 “-” + “小写字母” DOM.dataset.newAttrHaha 将会转换为属性“data-new-attr-haha”

• 使用setAttribute定义的属性，如果中间包含”-”，转换规则有所不同，中间所有大写字母均转换为小写之母

• DOM.setAttribute("data-newAttr2-abc", "22222") ==> data-newattr2-abc=”2222”，获取它可以使用getAttribute(‘设定时的名称’)

• DOM.getAttribute(“data-newAttr2-abc”)或是DOM.dataset.newattr2Abc获取。获取则刚好相反 “-” + “小写”-->“大写”，如果是“-”+ “数字”，则保持原样不变

• 设置属性时尽量使用setAttribute(“data-xxx”)，其中属性命名最好不要有大写的出现，避免出现“-”，推荐使用“char_char”，如：“favo_obj_id”

data-* 全局属性 构成一类名称为自定义数据属性的属性，允许通过脚本在HTML 和其 DOM 表示之间交换专有信息。所有这些自定义数据都可以通过属性设置的元素的 HTMLElement 接口来访问。 HTMLElement.dataset 属性可以访问它们