data-*属性难道只用来存简单变量吗_HTML自定义属性高阶玩法-html教程-PHP中文网

data-*属性只支持字符串，存复杂结构需手动json序列化/反序列化；dataset驼峰转换有局限；css选择器严格匹配字符串值；大量使用影响性能；不参与表单提交、seo或无障碍。

data-*属性难道只用来存简单变量吗_html自定义属性高阶玩法

不是。 data-* 属性完全可以存复杂结构，但必须手动序列化和反序列化——它底层只认字符串，不自动处理对象、数组或布尔值。

data-* 存 JSON 字符串是安全且常用的做法

你完全可以在 data-config、data-options 这类属性里塞 JSON 字符串，只要确保它是合法的字符串格式：

HTML 中必须用单引号或双引号包裹整个值，且内部引号需转义或混用（推荐单引号外裹，双引号内用）
JS 读取后必须显式调用 JSON.parse()，否则拿到的只是字符串
写入前必须先 JSON.stringify()，否则会隐式调用 .toString() 导致意外结果（比如对象变 [object Object]）

示例：

<div id="chart" data-options='{"theme":"dark","width":800,"series":[{"name":"sales","data":[12,34,27]}]}'>图表容器</div>

JS 读取：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

const el = document.getElementById('chart');<br>let options;<br>try {<br>  options = JSON.parse(el.getAttribute('data-options'));<br>} catch (e) {<br>  console.error('data-options 格式错误', e);<br>}

dataset API 对连字符命名的自动驼峰转换容易踩坑

用 element.dataset 访问时，data-user-id 会变成 element.dataset.userId，但这个映射不是双向无损的：

element.dataset.userId = '1001' → 正确生成 data-user-id="1001"
element.dataset.user_id = '1001' → 不会生成 data-user_id（下划线不被识别为分词符）
element.dataset['user-id'] = '1001' → 语法错误，方括号访问必须用驼峰名
element.dataset['userId'] = null → 不会删除属性，只会设成字符串 "null"；要用 delete element.dataset.userId

CSS 用 data-* 做状态驱动样式时，值必须严格匹配字符串

CSS 属性选择器对值是**全等匹配**，不是类型宽松比较：

<button data-loading="true"></button> ✅ 可被 button[data-loading="true"] 选中
<button data-loading="1"></button> ❌ 不会被 [data-loading="true"] 匹配
<button data-active></button> ✅ 可被 [data-active]（存在性选择）匹配，但 [data-active="true"] 就不匹配
布尔语义建议统一用 "true"/"false" 字符串，避免用空属性或数字