Question

我想将背景图像从数组添加到div。当我像这样设置背景时，它会起作用：

div.style.background = "url(path/to/img.jpg) no-repeat"

但是，如果我从这样的数组中获取它：

const array=[
    '"url(path/to/img.jpg) no repeat"', 
    '"url(path/to/img2.jpg) no repeat"', 
    '"url(path/to/img3.jpg) no repeat"'
];
div.style.background = array[1];

它不起作用。

const grid = document.getElementById("grid");
const photos = ['"url(img/DSC_0387.JPG) no-repeat"', '"url(img/DSC_0389.JPG) no-repeat"', '"url(img/DSC_0392.JPG) no-repeat"', '"url(img/DSC_0393.JPG) no-repeat"', '"url(img/DSC_0399.JPG) no-repeat"'];

function add() {
  let div = document.createElement('div');
  div.style.background = photos[2];
  div.style.borderRadius = "10px";
  div.style.height = "350px";
  div.style.backgroundSize = "contain";
  grid.appendChild(div);
};
add();

Answer 1

删除photos数组中的双引号。

即'"url(img/DSC_0387.JPG) no-repeat"'成为'url(img/DSC_0387.JPG) no-repeat'

const grid = document.getElementById("grid");
const photos = ['url(img/DSC_0387.JPG) no-repeat', 'url(img/DSC_0389.JPG) no-repeat','url(img/DSC_0392.JPG) no-repeat','url(img/DSC_0393.JPG) no-repeat','url(img/DSC_0399.JPG) no-repeat'];

function add(){
    let div = document.createElement('div');
    console.log(photos[2]);
    div.style.background = photos[2];
    div.style.borderRadius = "10px";
    div.style.height = "350px";
    div.style.backgroundSize = "contain";

    grid.appendChild(div);
};
add();

<div id="grid"></div>

Answer 2

欢迎使用StackOverflow。

您的照片数组中的值用双引号引起来，您应该将其删除。

引号将自动处理，您只需要将具有所需值的普通字符串传递给div.style.background。当前，您正在传递以"开头的字符串，因此这不是该属性的有效值，从而导致该结果无法在DOM上呈现。

Answer 3

在照片数组中，如下更改数组的值。删除数组值的单引号。

const photos = [
  "url(img/DSC_0387.JPG) no-repeat",
  "url(img/DSC_0389.JPG) no-repeat",
  "url(img/DSC_0392.JPG) no-repeat",
  "url(img/DSC_0393.JPG) no-repeat",
  "url(img/DSC_0399.JPG) no-repeat"
];

不会将img从数组添加到div背景

3 个答案: