javascript - 通过 vanilla Javascript 阅读参数

Question

寻找以下方面的一些建议 - 我正在将带有参数的 onclick 事件传递给 JS，如下所示:

<div class="artistthumb" id="jamesPaterson1" onclick="artistModalOpen('jamesPaterson1')"></div>    

这将进入以下 JS 函数:

function artistModalOpen(x1) {
    var imagePath = document.getElementById(x1).style.backgroundImage;
    console.log(x1);
    console.log(imagePath);
}

id 的 CSS 是:

background-image: url(../img/james_paterson_1.jpg);

到目前为止，我只记录了 2 个控制台输出 - 第一个很好，控制台按预期显示参数 x1:jamesPaterson1

第二个控制台日志没有显示任何内容。

我本以为会看到 url(../img/james_paterson_1.jpg)

有人知道为什么这没有发生吗？

非常感谢!

Answer 1

试试 getComputedStyle

var imagePath = getComputedStyle(document.getElementById(x1))
                .getPropertyValue('background-image');

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

The window.getComputedStyle() method returns an object that reports the values of all CSS properties of an element after applying active stylesheets and resolving any basic computation those values may contain. Individual CSS property values are accessed through APIs provided by the object or by simply indexing with CSS property names.