使用自定义data-属性可在HTML元素上存储额外信息，通过JavaScript的dataset访问或CSS属性选择器控制样式，实现数据与表现分离。
如果您希望在HTML元素上存储额外的信息以便通过JavaScript访问或用于CSS样式控制，可以使用自定义数据属性。这些属性以 data- 开头，允许开发者自定义结构化数据。以下是关于如何创建和使用HTML自定义数据属性的具体方法：
一、定义自定义数据属性
自定义数据属性通过在HTML标签中添加以 data- 为前缀的属性来实现。这些属性不会影响页面渲染，但可通过脚本读取和修改。
1、在目标HTML元素上添加 data- 开头的属性名称，例如：data-user-id 或 data-category。
2、为属性赋予一个字符串值，如：。
立即学习“前端免费学习笔记（深入）”；
3、属性名应使用小写字母和连字符分隔单词，避免使用大写或特殊字符。
二、通过JavaScript访问data-*属性
利用JavaScript的 dataset 属性可以方便地读取和设置所有自定义数据属性。
1、获取目标元素的引用，例如：const element = document.getElementById("myDiv");。
2、使用 element.dataset 访问数据对象，其中属性名会自动转换：连字符后首字母大写。
3、例如，data-product-name 在JavaScript中对应 element.dataset.productName。
4、可直接读取或赋值，如：console.log(element.dataset.productId); 输出 "1024"。
三、通过JavaScript动态设置data-*属性
除了读取，还可以在运行时动态修改自定义数据属性，以反映状态变化或更新信息。
1、获取需要操作的DOM元素。
2、使用 setAttribute() 方法进行设置，例如：element.setAttribute("data-status", "active");。
3、或者通过 dataset 直接赋值：element.dataset.status = "inactive";。
4、更改后，新值将立即生效并可在后续逻辑中被读取。
四、在CSS中使用data-*属性进行样式控制
可以通过属性选择器将data-*属性应用于CSS规则，实现基于数据的状态样式展示。
1、使用方括号语法在CSS中选择具有特定data属性的元素，如：[data-visible="true"] { display: block; }。
2、结合具体属性值设定样式，例如：[data-type="warning"] { color: red; }。
3、也可配合伪类使用，实现更复杂的条件渲染效果。
4、这种方式有助于分离表现与逻辑，提升维护性。
