用 vanilla js 替换背景图像 url 的一部分以获得一系列图像

Question

我有一个代码可以很好地更改普通图像的 src url 的一部分

let svgz = document.querySelectorAll(".svg");
for (let i = 0; i < svgz.length; i++) {
  svgz[i].src = svgz[i].src.replace("light", "dark");
} 

我想对 css background-image url 做同样的事情。

我根据上面提到的一个片段创建了这个片段，但它不起作用：

let svgbg = document.querySelectorAll(".svgbg");
for (let i = 0; i < svgbg.length; i++) {
    svgbg[i].style.backgroundImage = svgbg[i].style.backgroundImage.replace("light", "dark");
}

如何部分更改背景图片网址？

Answer 1

实际上它有效，它会在页面加载时干扰使用变量设置默认背景图像 url。 如果背景图像是独立于主题的单个图像，它就像魅力一样。

Answer 2

这可能是 JS 切换方法有用的情况，这当然取决于具体需要什么。 如果有人想要在两个背景图像之间切换（实际上，在任何两个类之间），请在此处放置代码：

<style>
.svgbg {
  background-image: url(light.svg);/* replace with your light background url */
}
.svgbgdark {
  background-image:url(dark.svg);/* replace with your dark background url */
}
</style>
<div class="svgbg"></div>
<script>
let svgbg = document.querySelectorAll(".svgbg");
for (let i = 0; i < svgbg.length; i++) {
  svgbg.classList.toggle('svgbgdark');
}
</script>

Answer 3

嗨，检查下面的代码片段，让我知道这是否解决了问题。

 let svgbg = document.querySelectorAll(".svgbg"); let bg = " url('img_tree.png')" console.log(bg); for (let i = 0; i < svgbg.length; i++) { //set your updated bg path here bg = " url('https://cdn.pixabay.com/photo/2020/08/19/00/13/sea-5499649__340.jpg')" console.log(bg); svgbg[i].style.backgroundImage = bg }

 .svgbg { background-size: 100% auto; width: 100%; height: 100%; z-index: -1; position: absolute; }

 <div class="svgbg"></div>