时间戳

首页 > 解决方案 > 使用 javasript 添加基于背景图像名称的类

javascript - 使用 javasript 添加基于背景图像名称的类

问题描述

现在我div用javascript创建了这个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具有另一个具有背景图像名称的类？

标签： javascripthtmlcss-selectors

解决方案

如果我正确理解了您的问题，您可以使用以下代码从 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。

推荐阅读