← 返回目录

6. 属性与 dataset 自定义属性

标签身上挂的"小标签"分两种：天生自带的（value、id、src）直接用点号读；你自己贴上去的（比如这个商品是几号、卖多少钱），用 setAttribute/getAttribute，或更省事的 dataset——它会把你贴的 data-goods-price 自动变成 JS 里的 dataset.goodsPrice。

6.1 互动演示（读这张商品卡片的小标签）

6.2 知识点逐条讲解

① 天生自带的：直接点一下

id、value、src 这些是标签生下来就有的，不用任何方法，点一下就读到了：

let inp = document.getElementById('nameInp'); // 抓到那个输入框
console.log(inp.value);  // 读：输入框现在写的字 → "初始值 张三"
inp.value = '李四';       // 写：直接把输入框改成"李四"
	

② 自己贴的：setAttribute 贴、getAttribute 读

不是天生的属性，就像给书包贴个便利贴：贴用 setAttribute，读用 getAttribute。

let box = document.getElementById('goods'); // 抓到商品卡片

box.setAttribute('data-tag', 'hot'); // 贴一张便利贴：写上 data-tag="hot"
let id = box.getAttribute('data-id'); // 读：把 data-id 的值拿出来
console.log(id);              // 打出来看看 → "1001"
	

③ dataset：data-* 的省事写法

HTML5 规定：凡是 data- 开头的便利贴，都能用 dataset 这把"万能钥匙"直接开。规则是：便利贴上的短横线，到 JS 里自动变成驼峰：

let box = document.getElementById('goods'); // 抓到商品卡片
console.log(box.dataset.id);          // 读 data-id → "1001"
console.log(box.dataset.goodsPrice);   // 读 data-goods-price → "99"（短横线变驼峰）

box.dataset.id = '2002';    // 改：把 data-id 改成 2002
box.dataset.stock = '100'; // 新贴一张 data-stock
	

如果你拿 dataset.goodsPrice 去做加减法，会发现结果不对。因为读出来的是字串 "99" 不是数字 99，字串相加是拼在一起；要算数得先用 Number() 转成数字。

实战里常把商品几号、列表第几行这种业务数字贴在标签上，点击时 e.target.dataset.id 一拿，就知道你点的是哪条——后面事件委托会天天用。

实战：用在哪 / 常见坑 / 怎么解决

① 用在哪：列表项存商品 id/序号，点击时取出；存业务标记。

② 常见坑：把 dataset 读出来的字串当数字直接加减，结果不对。

③ 怎么解决：读取后用 Number() 转换；短横线命名自动变驼峰，按驼峰取。