Question

我有一个使用Fetch方法创建的Unordered List wist List Items。数据是JSON数据，需要中继到HTML文档

我希望创建的列表项具有基于JSON数据URL的CSS背景。它看起来像这样;

fetch(url).then(function(response){
    return response.json();
    JSON.stringify(data);
}).then(function(data){

    for(var i=0;i<data.length;i++){
        var createListItem = document.createElement("li");
        createListItem.className = "listItem";
        var listItem = document.querySelector(".listItem");

        var createHeaderItem = document.createElement("h3");
        createHeaderItem.innerHTML = data[i].title;

        ul.appendChild(createListItem);
        createListItem.appendChild(createHeaderItem);

        if (data[i] && data[i].media[0] && data[i].media[0].url) {
            listItem.style.backgroundImage = "url('"+""data[i].media[0].url""+"')";

        } else {
            listItem.style.backgroundImage = "none";
    }
}
});

我无法获取列表项样式背景来中继URL。抓取data.media.url并将其用作CSS list-item属性的正确方法是什么？

Answer 1

看起来你有过多的报价

尝试在第一个+之后和第二个+

之前删除引号

  listItem.style.backgroundImage = "url('"+""data[i].media[0].url""+"')";

要

  listItem.style.backgroundImage = "url('"+ data[i].media[0].url +"')";

编辑：

for(var i=0;i<data.length;i++){
    var createListItem = document.createElement("li");
    createListItem.className = "listItem";

    var createHeaderItem = document.createElement("h3");
    createHeaderItem.innerHTML = data[i].title;

    ul.appendChild(createListItem);
    createListItem.appendChild(createHeaderItem);



    var listItem = document.querySelector(".listItem");


    if (data[i] && data[i].media[0] && data[i].media[0].url) {
        listItem.style.backgroundImage = "url('"+ data[i].media[0].url +"')";

    } else {
        listItem.style.backgroundImage = "none";
}

发生了什么变化？

你从未宣布

    var ul = document.createElement("ul");

我将假设这是全局变量并在此范围之外声明，否则您还有其他需要解决的问题。

我在代码的下方移动了以下代码（见下文）。您试图使用document.querySelector（）对尚未添加到DOM的元素访问DOM元素。因此，您总是返回null。

    var listItem = document.querySelector(".listItem");

我之前提出的这个过分引用仍然存在。

Answer 2

正如我在评论中提到的listItem是null。这是因为createListItem尚未添加到DOM中，.querySelector(..)在调用函数时检查当前的DOM树。

由于您正在操纵并附加到listItem，因此无需createListItem存在。因此，而不是尝试将.style.backgroundImage = ".."分配给listItem，将其添加到createListItem：

if (data[i] && data[i].media[0] && data[i].media[0].url) {
    createListItem.style.backgroundImage = "url('"+data[i].media[0].url+"')";
} else {
    createListItem.style.backgroundImage = "none";
}

此外，如果CSS类.listItem没有某种默认background-image，您可以省略上述else子句，因为它是不必要的：

if (data[i] && data[i].media[0] && data[i].media[0].url) {
    createListItem.style.backgroundImage = "url('"+data[i].media[0].url+"')";
}

无法获取图片网址并将其用作CSS背景图片

2 个答案: