时间戳

首页 > 解决方案 > 通过 vanilla Javascript 读取参数

javascript - 通过 vanilla Javascript 读取参数

问题描述

寻找以下一些建议 - 我将带有参数的 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)

任何人都知道为什么这没有发生？

提前谢谢了！

标签： javascriptcss

解决方案

尝试getComputedStyle

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

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

该window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解决这些值可能包含的任何基本计算后报告元素的所有 CSS 属性的值。通过对象提供的 API 或简单地使用 CSS 属性名称进行索引来访问各个 CSS 属性值。

推荐阅读