data-属性值默认为字符串，javascript读取时不会自动转换类型；需显式转换数值用number()或+号，布尔值用===严格比较；dataset自动驼峰化命名且trim空格，与getattribute行为不同。
data-属性值默认是字符串，但 JavaScript 读取时不会自动转类型
HTML 中所有 data- 属性的值，无论你写的是 data-count="123" 还是 data-is-active="true"，浏览器都当字符串存。JavaScript 通过 dataset 或 getAttribute() 读出来，也全是字符串 —— 不会变成 number 或 boolean。
常见错误：直接拿 element.dataset.count > 100 比较，结果是字符串比较（"99" > "100" 返回 true）；或者用 if (element.dataset.isActive) 判布尔，但 "false" 字符串也是真值。
- 需要数值时，显式转换：
Number(element.dataset.count)或+element.dataset.count - 需要布尔时，别靠字符串真假判断，用严格比对：
element.dataset.isActive === "true" - JSON 类型数据建议避免直接塞进
data-，改用JSON.parse(element.dataset.config)，但要加try/catch
dataset 属性名自动驼峰化，和 HTML 中的连字符命名不一致
dataset 是推荐的访问方式，但它会把 HTML 中的连字符（-）自动转成驼峰命名。比如 data-user-id → element.dataset.userId，data-api-url → element.dataset.apiUrl。
容易踩坑的是：写错大小写（element.dataset.userid 无效）、漏掉首字母大写（element.dataset.user-id 语法错误）、或误以为支持下划线（data_user_id 不会被识别）。
- 多词属性必须用连字符，不能用下划线或驼峰写在 HTML 里
- 读取时只认驼峰，
dataset.Userid、dataset.USERID都不行 - 设置时也走同样规则：
element.dataset.userId = "789"会生成data-user-id="789"
display 转换会影响元素渲染行为，但不改变 data- 属性本身
自定义属性和元素显示类型是两套独立机制。data- 属性只是元数据，不管你是 display: block 还是 display: inline-block，它都原样存在、可读可写。
但实际开发中常混淆：比如给一个 <span data-role="button"></span> 加 display: block 后，误以为它“变成了按钮”，其实只是视觉上像块级容器，dataset.role 还是字符串 "button"，没触发任何逻辑。
-
data-不参与样式计算，CSS 里用[data-role="button"]选中是合法的，但不会自动加交互 - 想让行内元素响应点击区域更大？得配
display: inline-block+padding，不是靠改data-实现 - 元素类型转换（
display）和自定义属性操作，该分开设计、分开调试
setAttribute/getAttribute 和 dataset 的行为差异必须分清
两者都能读写 data- 属性，但底层逻辑不同：getAttribute() 拿到原始字符串，dataset 做了驼峰映射和自动清理（比如删掉开头空格）。
典型问题：用 setAttribute("data-count", " 42 ") 写入，getAttribute("data-count") 返回 " 42 "（带空格），而 dataset.count 返回 "42"（已 trim）。
- 需要保留空格或特殊格式？用
getAttribute()+setAttribute() - 日常增删改查推荐
dataset，更简洁且自动处理命名转换 - 删除属性时，
delete element.dataset.xxx和element.removeAttribute("data-xxx")效果一样，但前者更语义化
实际用的时候，data- 属性不是“类型系统”，它只是字符串容器；类型转换全靠 JS 手动做，而且必须在每次读取后立刻判断上下文需要什么类型 —— 这个步骤漏掉，后面所有逻辑都可能跑偏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
