用 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>