为何style.backgroundImage返回空值？点击按钮无法获取背景图URL

1. 无法获取背景图URL的核心原因 #

this.style.backgroundImage只能读取元素的内联样式（即直接写在HTML元素style属性中的样式），而你的背景图是通过CSS类（.w/.a等）定义的，属于外部/内部样式表中的样式，因此用这个方法无法获取到对应值，只会返回空字符串。

要获取元素最终渲染时应用的样式，必须使用window.getComputedStyle()方法，它会返回元素经过所有样式计算后的最终样式集合。

2. 循环遍历的潜在问题 #

你使用for (let i in document.querySelectorAll(".drum"))遍历按钮，querySelectorAll返回的是NodeList类数组对象，for...in会遍历该对象的所有可枚举属性（包括length、item等非元素属性），这会导致给非DOM元素添加事件监听，可能引发不必要的错误。

正确的遍历方式是使用forEach（现代浏览器支持）或for...of循环，只遍历NodeList中的DOM元素。

修复后的代码 #

// 遍历所有drum按钮并绑定点击事件
document.querySelectorAll(".drum").forEach(button => {
    button.addEventListener("click", handleClick);
});

function handleClick() {
    // 获取当前元素的计算样式
    const computedStyle = window.getComputedStyle(this);
    // 从计算样式中提取背景图URL
    const bgImageUrl = computedStyle.backgroundImage;
    console.log(bgImageUrl);
}

运行这段代码后，点击按钮就能在控制台看到对应的背景图URL了，格式类似url("images/tom1.png")。

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