如何在使用 Object.assign 创建 html 元素时添加“data-*”属性

Question

我有以下代码：

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

我想在对象分配中设置数据属性，而不是单独设置。我尝试过dataset: { showtime: data.duration }，但这会导致以下类型错误 TypeError:setting getter-only property "dataset"

提前致谢！

Answer 1

如果您只想为图像元素设置属性，也许这可能是更好的方法。

const imageRef = document.createElement('img');

Object.entries({
    className: 'carouselItem',
    src: `/public/leerlingen/${data.item}`,
    loading: 'eager',
    'data-showtime': data.duration
}).forEach(([key, value]) => {
    imageRef.setAttribute(key, value);
});