时间戳

首页 > 解决方案 > 如何使用 JavaScript 变量添加背景图片

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

问题描述

基本上正在做的是使用for循环遍历具有特定类名的所有元素并使用它们的innerHTML / text内容添加适当的背景图像，因为它是一个照片库，每个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>

标签： javascripthtmlcssgrid

解决方案

  1. 首先确保您的脚本是在 html 代码之后编写的。html 内容的顺序应该是第一个 html，然后是 javascript。

  2. 在 javascript 代码中，您应该用单引号括起您的图像 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')"
}

推荐阅读