You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何使用Object.assign()为DOM元素赋值dataset属性?

是否可以使用Object.assign()来赋值dataset属性?

你示例中的第一种写法无法正常生效:

Object.assign(document.getElementById('test'), {
    id: 'test',
    dataset: { mydata: 'test' },
})

原因是DOM元素的dataset是只读的DOMStringMap类型实例,不支持直接用普通对象整体覆盖赋值,浏览器不会把你传入的普通对象解析为元素对应的data-*属性,这种写法的dataset赋值会直接被忽略。


你补充的第二种写法是可正常运行的批量赋值方案:

Object.assign(document.getElementById('test').dataset, {
    mydata: 'test',
})

这种写法直接对dataset实例本身执行Object.assign(),会遍历传入对象的所有可枚举键值对,逐个写入到dataset中,写入操作会自动同步到DOM元素的data-*属性上,比如上面的代码执行后,对应元素上会自动新增data-mydata="test"属性。
如果需要赋值的属性对应DOM上是多段横线分隔的命名,只需要按照dataset的驼峰转换规则传入驼峰格式的键名即可,比如传入userAge: '18',会自动生成data-user-age="18"属性。

内容的提问来源于stack exchange,提问作者NicOwen

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.12 07:54:00