为什么 style.backgroundImage 返回空？答案

【问题标题】：Why style.backgroundImage returns empty?为什么 style.backgroundImage 返回空？
【发布时间】：2023-01-08 11:29:13
【问题描述】：

所以这是 HTML

<button class="w drum">w</button>
<script src="index.js" charset="utf-8"></script>

这是 CSS

.w {
  background-image: url("images/tom1.png");
}

.a {
  background-image: url("images/tom2.png");
}

.s {
  background-image: url("images/tom3.png");
}

.d {
  background-image: url("images/tom4.png");
}

.j {
  background-image: url("images/snare.png");
}

.k {
  background-image: url("images/crash.png");
}

.l {
  background-image: url("images/kick.png");
}

最后这是javascript

for (let i in document.querySelectorAll(".drum")) {
    document.querySelectorAll(".drum")[i].addEventListener("click", handleClick);
}

function handleClick() {
    var url = this.style.backgroundImage;
    console.log(url);
}

所以当我点击 w / a / s / d / etc. 按钮时，控制台应该返回图像 url 吧？

但这就是发生的事情......

Console log shows empty string

为什么是空的？？？请帮助

【问题讨论】：

HTMLElement 的 style 属性返回排队style 元素的属性。你需要得到计算风格带有window.getComputedStyle 的元素。
@EmielZuurbier 所以 URL 是一种计算样式，非常感谢您的帮助！

标签： javascript dom

【解决方案1】：

使用NodeList.prototype.forEach()和Window.getComputedStyle

const handleClick = (evt) => {
  const url = getComputedStyle(evt.currentTarget).backgroundImage;
  console.log(url);
}

document.querySelectorAll(".drum").forEach((elDrum) => {
  elDrum.addEventListener("click", handleClick);
});

【讨论】：

我不知道函数可以通过使用 const 来定义，我想每天都要学习新事物。 “evt.curentTarget”与“this”相同，对吗？谢谢您的帮助！！！！
@Kuncung 你猜对了最难理解的概念之一和两者之间的区别常规的functions 和“胖”箭头功能。实际上，箭头函数没有知识this 因为他们不能绑定。因此，我们使用 Event 参数并使用 Event.currentTarget 提取“this”——这是监听器所依附的元素； vs 即：Event.target 而不是传播事件的确切元素（可能是它的子元素）。 developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

【解决方案2】：

import { createApp, markRaw } from "vue";
import { createPinia } from "pinia";

import App from "./App.vue";
import router from "./router";

// import "./assets/main.css";

const app = createApp(App);
const pinia = createPinia()

pinia.use(({store}) => {
    store.router = markRaw(router)
})

app.use(pinia);
app.use(router);

app.mount("#app");

主要 js di pinia

【讨论】：