何不... 先说个事儿， HTML5给我们扔了个叫 data-* 的自定义属性，听起来很牛逼，其实就是在标签上随便贴点字串，后面可以让js去捞。

一、 data属性到底是啥子玩意儿

YYDS！ 最最最基本的，你可以在任何元素后面加个 data-开头的属性，比如：

Hello

这玩意儿不影响页面渲染，只是让你以后能用 element.dataset.xxx 去取值，总的来说...。

1.1 为什么要这么写？

主要原因是有时候你不想把数据写进class或者id里那样会把样式和逻辑搞混。 归根结底。 比如一个按钮要记住自己是不是被点过 就可以：

赞

1.2 常见坑

• 属性名里别带大写字母，写成 data-MyInfo 会直接失效。
• 别把对象直接塞进去，只能是字符串，要想存对象得 JSON.stringify。
• 有时候忘记驼峰转化， data-user-id 用 js 拿到的是 dataset.userId，不是 user-id。

二、 在JS里怎么读写

下面给你们演示几段超简陋代码：

// 获取元素
var btn = document.querySelector;
// 读取
var liked = btn.dataset.liked; // "false"
// 
btn.dataset.liked = 'true';
btn.textContent = '已赞';

翻车了。 注意：如果你用了 jQuery 那么可以直接：

$.data; // 设置
var v = $.data; // 读取

2.1 把数据当作状态机用

假设每次点按钮都要切换状态，可以这么写：

function toggle{
    var cur = btn.dataset.liked === 'true';
    btn.dataset.liked = .toString;
    btn.textContent = cur ? '赞' : '已赞';
}

*小技巧*: 把 data- 属性配合 CSS 伪类做视觉提示：

button::after{
    content:"✅";
}
button::after{
    content:"❌";
}

三、实战案例——商品卡片

为什么不用 Ajax？主要原因是我们直接把数据塞进 html 里了呀！省流量省心！

四、SEO 与 Data 属性——真的有用吗？

搜索引擎爬虫一般不会去理会 data-* 的值。 所以如果你想靠它提升排名， 我emo了。 那就白忙活。不过它可以帮你做一些结构化信息， 比如：

   ...

*提醒*: 把关键字塞进 data-title 是没用的，搜索引擎只看可视文本和 meta 信息，物超所值。。

五、常见错误集合

• "data-" 后面空格了：
  → 完全失效。
• "data-" 重复太多：
  → 看着就恶心。
• "dataset" 用错地方：var x=document.dataset.xxx → 没有 dataset 在 document 上。
• "JSON.parse" → 报错，要先判断是否存在。

六、乱七八糟的 Tips

- 想让 CSS 根据数据值改变颜色？直接属性选择器 {color:red}

- 用 CSS 动画配合 data-state 实现切换 .box{animation:open 0.5s}，格局小了。

我满足了。 - 别忘了 IE9 以下根本不支持 dataset，只能走 getAttribute/setAttribute。

七、

总之啊，这玩意儿就是给前端偷懒的一根棍子，用得好还能省好多代码；用得烂就跟粪坑一样臭。希望大家别跟着抄，我这篇已经够烂够乱了你们自己再去折腾吧。别忘了给我点个赞👍，或者不给也行，我懒得管。

---

©2026 小白前端搬运工 | 本文仅供学习，请勿用于非法用途。 联系方式：

---