JavaScript为动态创建的HTML元素设置背景图不生效如何解决

算力阿峰

2026-8-28

问题根因

代码不生效是两个核心错误导致的：

CSS属性用错：style.backgroundColor 仅支持设置纯色背景值，给元素添加图片背景需要使用 style.backgroundImage 属性。
变量未正确传入：你把JS数组取值的表达式直接写在了引号包裹的字符串内部，JS不会自动解析字符串内的变量，最终会把moviesToDisplay[each]['cover']当成固定文本路径去加载资源，自然无法获取到正确的封面地址。

修正后代码

for(let each in moviesToDisplay) {
    let div = document.createElement("div")
    div.innerText = moviesToDisplay[each]['title'];
    
    // 正确设置背景图：通过模板字符串把实际封面路径传入url()
    div.style.backgroundImage = `url(${moviesToDisplay[each]['cover']})`;
    // 若运行环境不支持ES6模板字符串，可替换为字符串拼接写法：
    // div.style.backgroundImage = "url('" + moviesToDisplay[each]['cover'] + "')";

    // 可选样式优化：避免背景图重复平铺，让图片适配容器尺寸
    div.style.backgroundRepeat = "no-repeat";
    div.style.backgroundSize = "cover";
    div.style.backgroundPosition = "center";
    
    flex.appendChild(div);
}