HTML5 自定义属性

HTML5 提供了自定义属性（Custom Attributes）的功能，允许开发者在 HTML 元素上添加自定义的属性，以便存储额外的数据或提供特定的功能。

自定义属性的命名应以 "data-" 开头，后面可以跟上任意的自定义名称。这样的命名约定有助于确保自定义属性不与 HTML 或其他标准属性冲突，并且兼容性较好。

以下是自定义属性的示例：

<div data-name="John" data-age="25">...</div>

在上述示例中，data-name 和 data-age 是自定义属性，它们存储了关于 <div> 元素的额外信息。

在 JavaScript 中，可以使用 getAttribute() 方法来获取元素的自定义属性的值。这适用于以 "data-" 前缀定义的自定义属性，以及其他任意的自定义属性。

以下是获取自定义属性值的示例：

<div id="myDiv" data-name="John" data-age="25">...</div>

var div = document.getElementById('myDiv');

var name = div.getAttribute('data-name');
console.log(name); // 输出 "John"

var age = div.getAttribute('data-age');
console.log(age); // 输出 "25"

在上述示例中，使用 getAttribute('data-name') 获取了 data-name 自定义属性的值，并使用 getAttribute('data-age') 获取了 data-age 自定义属性的值。

需要注意的是，getAttribute() 方法返回的值始终作为字符串。如果自定义属性的值是数字类型，你可能需要使用适当的方法（如 parseInt() 或 parseFloat()）将其转换为数字。

另外，从 HTML5 开始，可以直接通过 JavaScript 对象的属性来访问自定义属性。在这种情况下，自定义属性的名称不需要使用 data- 前缀。

<div id="myDiv" data-name="John" data-age="25">...</div>

var div = document.getElementById('myDiv');

var name = div.dataset.name;
console.log(name); // 输出 "John"

var age = div.dataset.age;
console.log(age); // 输出 "25"

在上述示例中，dataset 属性提供了对自定义属性的访问，它返回一个对象，其中每个自定义属性都是一个属性键值对。这种方法更简洁，不需要使用 getAttribute()，并且自动处理了 data- 前缀。