如何使用 JavaScript 变量添加背景图片

Question

基本上，我正在做的是使用 for 循环遍历具有某个 class 名称的所有元素，并使用它们的 innerHTML/文本内容添加适当的背景图像，因为它是一个照片库，每个 div 都有其名称等于文本内容，但由于某种原因，javascript 没有错误，但没有背景，并且我确信我将所有内容都很好地链接了，并且由于其他一些更奇怪的原因，网格在 firefox 中工作正常，但在 chrome 中却没有“它根本没有”

 let imgs=document.getElementsByClassName("gallery"); for(items of imgs){ let text,x; text=items.innerHTML; items.style.background="url("+text+".jpg)" }

 .photogallery{ display: grid; grid-template-columns: repeat(auto-fit,minmax(600px,1fr)); grid-auto-rows: 300px; row-gap: 1rem; }

 <section class="photogallery" id="np"> <div class="gallery">IMG 1</div> <div class="gallery">IMG 2</div> <div class="gallery">IMG 3</div> <div class="gallery">IMG 4</div> <div class="gallery">IMG 5</div> </section>

Answer 1

1. 首先确保你的脚本写在 html 代码之后。 html 内容的顺序应首先是 html，然后是 javascript。

2. 在 javascript 代码中，您应该用单引号将图像 URL 包装起来。 因为您的 URL 有空格。

例如：

let imgs=document.getElementsByClassName("gallery");
for(items of imgs){
    let text,x;
    text=items.innerHTML;
    //In below code use single quote
    items.style.background="url('"+text+".jpg')"
}