如何使用DOM与JavaScript修改背景图片及切换失效问题排查

你的代码存在两处核心API使用/语法错误，修正后即可正常实现点击切换随机背景的效果：

• 元素获取错误：document.getElementsByTagName('main') 返回值是包含所有匹配main标签的类数组元素集合，不是单个DOM元素，无法直接调用style属性。你可以通过下标取集合第一个元素，或者直接用document.querySelector('main')获取单个目标元素，写法更简便。
• 背景属性赋值格式错误：CSS的backgroundImage属性值需要符合CSS语法规则，不存在你代码里写的全局URL()调用方法，正确赋值需要拼接为url("图片链接")的字符串格式。

修复后可直接运行的代码 #

const image_gallery = [
    'https://img.playbuzz.com/image/upload/ar_1.5,c_pad,f_jpg,b_auto/q_auto:good,f_auto,fl_lossy,w_480,c_limit,dpr_1/cdn/2c2dd0ea-8dec-4d49-8a95-f7b18f0b7aed/df312655-1d96-457d-88f4-cfc93c580d1d_560_420.jpg',
    'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTwpR0X1hmpt4Kd2WviLXQGPrnUllW2UoLgtoWBoesgtFtSPFCF808bibJ8K2VhHRCki48&usqp=CAU',
    'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRxmLTuD78jeZaVR3I_xfIuvmE4tse_JuhGjQ&usqp=CAU',
    'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxWrBodkwbTlxbMexeQCOneifPHaOUoTFwPA&usqp=CAU',
    'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtQMwmsMjdYfF0W0cyMPX673aKVK3m8sSDjg&usqp=CAU'
]
function random_image_picker(min, max) {
    let a = Math.floor(Math.random() * (max - min + 1) + min);
    return image_gallery[a];
}
let background_theme = document.querySelector('#background_theme');
// 获取单个main元素
let main = document.querySelector('main');
background_theme.addEventListener('click',function(){
    // 按照CSS background-image语法拼接属性值
    main.style.backgroundImage = `url("${random_image_picker(0,4)}")`
    // 可选配置：让背景图适配容器尺寸，避免显示变形/不全
    main.style.backgroundSize = 'cover';
    main.style.backgroundPosition = 'center';
})

补充提示：如果需要背景图铺满容器不变形，加上代码里注释提到的两个背景样式配置即可，显示效果会更符合常规使用需求。

内容的提问来源于stack exchange，提问作者Sandeep Kumar