data-*属性的应用与实践

1、定义2、用法举例2、应用场景

1、定义

data-* 属性用于存储页面或应用程序的私有自定义数据，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本在 HTML 与 DOM 表现之间进行专有数据的交换。

如，百度官方页面中：

存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。

data-* 属性由两部分组成：

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

注意：用户代理会完全忽略前缀为 “data-” 的自定义属性。

2、用法举例

举例：

使用 data-* 属性

访问 data-* 属性

在JavaScript中，可以通过元素的dataset属性来访问data-*属性的值。dataset属性返回一个类似对象的Map，其中的键名是data-*属性去除data-前缀后的部分，所有连字符会被转换成驼峰式命名法（camelCase）。

var element = document.getElementById('example');

console.log(element.dataset.myCustomAttribute); // 输出: "some value"

data-*命名也可以使用驼峰格式，但需要注意访问方式：

使用 data-* 属性

访问 data-* 属性

var element = document.getElementById('example1');

console.log(element.dataset.myCustomAttribute); // 输出: "some value1"

// 驼峰写法，大写的字母需要转换为小写才能获取到，否则就是undefined

var element = document.getElementById('example2');

console.log(element.dataset.mycustomattribute); // 输出: "some value2"

2、应用场景

data-* 属性可用于多种场景：

存储额外的元数据：例如，存储某个元素的状态或与之关联的额外信息。

触发特定行为：结合JavaScript，可以根据data-*属性的值来执行某些功能。

Click me

模板引擎：在服务器端渲染或客户端模板引擎中，data-*属性可以用来填充动态内容。

CSS选择器：也可以通过:has([data-*])伪类（在支持的浏览器中）在CSS中选择具有特定data-*属性的元素。

This paragraph will have a yellow background.

This paragraph will not.

/* 选择所有具有 data-highlight 属性的元素 */

[data-highlight] {

background-color: yellow;

}

This paragraph will have a yellow background.

This paragraph will not.

/* 选择所有具有 data-highlight 属性的元素 */

[data-highlight] {

background-color: yellow;

}

/* 选择所有 data-highligh='true' 的元素 */

[data-highligh='true'] {

background-color: red;

}

请注意，第四种用途中使用的CSS选择器[data-highlight]在现代浏览器中是被支持的，但并不是所有浏览器都支持更复杂的data-*属性选择器，例如[data-highlight=“true”]。在使用更复杂的data-*选择器时，建议检查浏览器兼容性或使用JavaScript来实现更复杂的选择逻辑。