VanillaJS-抓取数据属性值，添加带值的样式属性;删除数据属性

Question

我的任务是使用添加的样式属性中的数据属性URL暴力覆盖转盘。

因此，我有五张这样的幻灯片(带有bg图像的div嵌套在父幻灯片div中(：

<div class="slider">
<div class="slide">
<div class="slide-bg" data-flickity-bg-lazyload="https://imageurl.jpg"></div>
</div>
<div class="slide">
<div class="slide-bg" data-flickity-bg-lazyload="https://imageurl.jpg"></div>
</div>
<div class="slide">
<div class="slide-bg" data-flickity-bg-lazyload="https://imageurl.jpg"></div>
</div>
<div class="slide">
<div class="slide-bg" data-flickity-bg-lazyload="https://imageurl.jpg"></div>
</div>
<div class="slide">
<div class="slide-bg" data-flickity-bg-lazyload="https://imageurl.jpg"></div>
</div>
</div>

我需要在(添加的(样式属性background-image: url(...)中使用data-flickity-bg-lazyload属性值，所以它的结果如下：

<div class="slider">
<div class="slide">
<div class="slide-bg" style="background-image:url(https://imageurl.jpg)"></div>
</div>
<div class="slide">
<div class="slide-bg" style="background-image:url(https://imageurl.jpg)"></div>
</div>
<div class="slide">
<div class="slide-bg" style="background-image:url(https://imageurl.jpg)"></div>
</div>
<div class="slide">
<div class="slide-bg" style="background-image:url(https://imageurl.jpg)"></div>
</div>
<div class="slide">
<div class="slide-bg" style="background-image:url(https://imageurl.jpg)"></div>
</div>
</div>

有没有一种优雅的方法可以用querySelectorAll+loop+removeAttribute+addAttribute来实现这一点？

Answer 1

如果我理解正确，那么你可以试试这个例子：

document.querySelectorAll('.slider .slide-bg').forEach(el => {
el.style.backgroundImage = `url(${el.dataset.flickityBgLazyload})`;
delete el.dataset.flickityBgLazyload;
})

.slide-bg {
width: 100px;
height: 100px;
}

<div class="slider">
<div class="slide">
<div class="slide-bg" data-flickity-bg-lazyload="https://www.fillmurray.com/100/100"></div>
</div>
<div class="slide">
<div class="slide-bg" data-flickity-bg-lazyload="https://www.fillmurray.com/100/100"></div>
</div>
<div class="slide">
<div class="slide-bg" data-flickity-bg-lazyload="https://www.fillmurray.com/100/100"></div>
</div>
<div class="slide">
<div class="slide-bg" data-flickity-bg-lazyload="https://www.fillmurray.com/100/100"></div>
</div>
<div class="slide">
<div class="slide-bg" data-flickity-bg-lazyload="https://www.fillmurray.com/100/100"></div>
</div>
</div>