如何为 JSON 文件中的元素设置背景

Question

我正在尝试为我从 json 文件中抓取图像的几个按钮设置特定背景。我正在尝试将 css“背景”属性应用于它以通过 javascript 完成此操作，但我不确定如何执行此操作。我用简单的颜色“红色”测试了当前代码，这工作得很好，但是当我尝试从 json 文件中提取它时，没有结果。对我可以做些什么来解决这个问题有什么帮助吗？这是我的代码：


   const t = "js/test.json"
   fetch(t)
      .then(function (response) {
         return response.json();
      })
      .then(function (jsonObject) {
         var color = jsonObject['color'];
         for (var i = 0; i < color.length; i++) {
            var buttonColor = i;
         if (buttonColor == 0 ) {
            document.querySelector(".btn").style.background= color[0].image;
         }


         }
      });

和我从中提取图像的 JSON 文件：

{
    "color":[
        {
            "name": "red",
            "image": "colors/red.png",
            "small-image":"colors/red-small.png"
        },
        {
            "name": "blue",
            "image": "colors/blue.png",
            "small-image":"colors/blue-small.png"
        },
        {
            "name": "yellow",
            "image": "colors/yellow.png",
            "small-image":"colors/yellow-small.png"
        },
        {
            "name": "green",
            "image": "colors/green.png",
            "small-image":"colors/green-small.png"
        }
    ]
}

我最需要帮助的行是第 11 行，其中

document.querySelector(".btn").style.background= color[0].image;

找到了。

Answer 1

您可以设置背景图像属性

 document.querySelector(".btn").style.backgroundImage = `url(${color[0].image})`;

注意：文件的路径必须正确，所以现在它会查看是否有目录 colors 以及该目录中是否有名为 red.png 的 png .

Answer 2

要设置背景图片而不是颜色，您需要将图片的路径包装到 url() 函数中。所以，而不是做：

document.querySelector(".btn").style.background = color[0].image;

你应该做的：

document.querySelector(".btn").style.background = `url(${color[0].image})`;

如何为 JSON 文件中的元素设置背景

How to set a background to an element from a JSON file

javascript

json

background-image

fetch