使用Object.assign创建HTML元素时如何添加data-*自定义属性

错误原因 #

DOM 元素的 dataset 是只读访问器属性，你只能读取它的引用后修改内部属性，不能直接用自定义对象覆盖整个 dataset，这就是你传入 dataset: { showtime: data.duration } 触发类型错误的原因。

实现方案 #

你可以用链式赋值的方式把逻辑整合到同一段语句里，不需要单独拆分 setAttribute 调用：

let item;
(item = Object.assign(document.createElement('img'), {
    className: 'carouselItem',
    src: `/public/leerlingen/${data.item}`,
    loading: 'eager',
})).dataset.showtime = data.duration;

如果需要一次性配置多个 data 属性，也可以用嵌套的 Object.assign 批量处理 dataset：

const item = document.createElement('img');
Object.assign(item, {
    className: 'carouselItem',
    src: `/public/leerlingen/${data.item}`,
    loading: 'eager',
});
// 批量配置所有data属性，不需要单独写多个setAttribute
Object.assign(item.dataset, {
    showtime: data.duration,
    // 其他data属性直接在此补充即可
});

两种写法都符合需求，不需要单独调用 setAttribute 方法。

内容的提问来源于stack exchange，提问作者Maxim