使用 javascript 添加基于背景图像名称的类答案

【问题标题】：Adding a class based on background image name with javasript使用 javascript 添加基于背景图像名称的类
【发布时间】：2019-11-25 20:31:29
【问题描述】：

现在我用 javascript 创建了div 这个 div 有一个带有不同图像的背景图像，我需要根据背景图像名称为每个 div 添加一个类名，有没有办法在 javascript 或 jquery 中做到这一点?

// adding divs to mapContainer
var mapCont = document.getElementById("mapContainer");
for (var i = 0; i < 20; i++) {
var child = document.createElement("div");
child.classList.add("logo-" + i);
mapCont.appendChild(child)
}

css

#mapContainer > div.logo-3 {
    background-image: url(../images/car.png);
}
#mapContainer > div.logo-4 {
    background-image: url(../images/bike.png);
}
#mapContainer > div.logo-5 {
    background-image: url(../images/train.png);
}

如何在没有图像扩展名的情况下在javascript中为每个具有相同背景图像名称的div添加一个类名，以便div有另一个具有背景图像名称的类？

【问题讨论】：

你想要什么？要在 bg 上创建具有图像名称的类？
是的，这正是我所需要的

标签： javascript html css-selectors

【解决方案1】：

如果我正确理解了您的问题，您可以使用以下代码从 CSS 类中获取图像路径：

var body = document.getElementsByTagName('body')[0];
var elem = document.createElement("div");
elem.classList.add('logo-3');
body.appendChild(elem);
alert(getComputedStyle(elem).getPropertyValue('background-image'));
body.removeChild(elem);

它将提醒背景图像样式。使用内容将其添加到您的 classList。您可能希望使用正则表达式获取路径。

确保将元素添加到DOM中以获取属性，否则将返回null。

【讨论】：