data-*

data-*

data-*全局属性组成了一类称为自定义数据属性的属性，它允许通过脚本在HTML和其DOM表示之间交换专有信息。

所有这些自定义数据都可以通过设置了该属性的元素的HTMLElement接口访问，HTMLElement.dataset属性提供了对这些数据的访问。

名称规则

*可以被任何符合XML名称的生成规则的名称替代，通常建议使用以下方式来命名：

1. 名称不应以xml(不区分大小写)开头，因为这是为将来的XML规范保留的。
2. 名称不应包含任何冒号字符:，因为XML为这类名称分配了含义。
3. 名称不应包含任何大写字母，因为XML中的名称都是小写的。
4. 尽量避免在连字符后面使用非字母字符，可能不会被正确识别。

以上方式只是推荐的方式，如果不遵守，其仍会被JavaScriptHTMLElement.dataset属性识别，并且这些属性仍然会使用CSS属性选择器进行匹配，其中属性是不区分大小写的，而属性值是区分大小写的。

注意点

dataset版本的属性名会移除data-前缀，并将剩余的部分从kebab-case(中横线命名法)转换为camelCase(驼峰命名)。

HTML

<div
    id="box"
    data-x="1"
    data-y="2"
    data-text="div element"
    data-text-abc="div element abc"
    data--test="test"
    data-test-1="test1"
    data-style="style"
>
  This is a DIV Element.
</div>

CSS

#box {
    width: 500px;
    height: 500px;
}

div[data-text="div element"] {
    margin: 0 auto;
}

/* 对 data-style 也生效 */
div[data-Style="style"] {
    background-color: aquamarine;
}

JavaScript

const oDiv = document.querySelector('#box')

console.log(oDiv.dataset);
/**
{
    "x": "1",
    "y": "2",
    "text": "div element",
    "textAbc": "div element abc",
    "Test": "test",
    "test-1": "test1",
    "style": "style"
}
 */

console.log(oDiv.getAttribute('data-text')); // div element
console.log(oDiv.dataset.textAbc); // div element abc