基于javascript数组更改背景图像url

是否可以引用javascript数组值在css中设置背景

我有一个包含多个单元格的表，我希望css获取数组中的第三个值并将其作为背景，但我无法使其正常工作，其想法是第三个数组“logo.png”中的任何值都将设置为数据标题图像

像这样

var-arr=[
//日期链接标题
['Dec 18，2020 01:00:00'，'TEXT'，'TEXT'，'image.png']，//**这些“image.png”是我想要添加到上述css中的**//
['Dec18202001:00:00'，'TEXT'，'TEXT'，'image2.png']，
['Dec18202001:00:00'，'TEXT'，'TEXT'，'image3.png']，
['Dec18202001:00:00'，'TEXT'，'TEXT'，'image4.png']，
['Dec18202001:00:00'，'TEXT'，'TEXT'，'image5.png']，
['Dec18202001:00:00'，'TEXT'，'TEXT'，'image6.png']，
['Dec18202001:00:00'，'TEXT'，'TEXT'，'image7.png']，
['Dec18202001:00:00'，'TEXT'，'TEXT'，'image8.png']，
['Dec18202001:00:00'，'TEXT'，'TEXT'，'image9.png']，
['Dec18202001:00:00'，'TEXT'，'TEXT'，'image10.png']，
['Dec18202001:00:00'，'TEXT'，'TEXT'，'image11.png']，
];
//5分钟后取出
风险价值剩余=10；
//获取ID为“timer”的元素
var wrap=document.querySelector（“#timer tbody”）；
//用于循环数组“arr”
对于（变量i=0；i-60*1000*remAft）{
返回true；
}否则{
返回false；
}
}
功能myTimers（tim、ele）{
//确定我们倒计时的日期
var d=新日期（tim）；
var countDownDate=d.setTime（d.getTime（）+d.getTimezoneOffset（）*60*1000）；
//每1秒更新一次倒计时
var x=setInterval（函数（）{
//获取今天的日期和时间
var now=new Date（）.getTime（）；
//找出现在和倒计时日期之间的距离
var距离=倒计时日期-现在；
//天、小时、分钟和秒的时间计算
变量天数=数学楼层（距离/（1000*60*60*24））；
可变小时数=数学楼层（（距离%（1000*60*60*24））/（1000*60*60））；
var分钟=数学楼层（（距离%（1000*60*60））/（1000*60））；
var秒=数学楼层（（距离%（1000*60））/1000）；
//使用id=“demo”在元素中显示结果
document.getElementById（ele.innerHTML=days+“d”+hours+“h”+
分钟+米+秒+秒；
//如果倒计时结束，写一些文字
如果（距离<0）{
如果（距离>-60*1000*remAft）{
document.getElementById（ele.innerHTML=“完成”；
document.getElementById（ele.classList.add（'dropped'）；
document.getElementById（ele.style.color='tomato'；
document.getElementById（ele.style.text装饰=“行通过”；
}否则{
净间隔（x）；
var chekEl=document.getElementById（ele）；
如果（切克尔）{
chekEl.parentElement.remove（）；
}
}
}
//如果天数为0，则添加类“endsoon”
如果（天数==0）{
document.getElementById（ele.classList.add（'endsoon'）；
}
}, 1000);
}

。下拉列表{
宽度：600px；
填充：0px；
填充顶部：100px；
填充底部：150px；
}
桌子{
边框宽度：70像素；
边框颜色：黑色；
背景色：#DCF5F1；
}
.下拉列表{
保证金：自动；
}
th{
边框：2件纯黑；
}
运输署{
边框：2个黑色凹槽；
}
a{
文字装饰：无；
颜色：黑色；
}
a:悬停{
颜色：灰色；
文字装饰：下划线；
}
桌子{
宽度：600px；
表布局：固定；
字体大小：20px；
}
表td{
填充：20px；
字体大小：粗体；
字体系列：arial；
}
#计时器，很快结束{
颜色：红色；
}
[数据标题]：悬停：在{
不透明度：1；
过渡：所有0.5秒缓解0.5秒；
能见度：可见；
}
[数据标题]：之后{
内容：attr（数据标题）；
背景色：#f4c2sc2；
背景图像：url（arr[3]）；/*这是背景图像行*/
字体大小：20px；
位置：绝对位置；
填充：20px 5px 2px 5px；
左：-130px；
顶部：-35px；
高度：60px；
宽度：80px；
空白：nowrap；
不透明度：0；
z指数：99999；
可见性：隐藏；
}
[资料标题]{
位置：相对位置；
}

标题
标题

不幸的是，您还不能将

attr

用于

背景图像

，因此您必须采用更丑陋的方式使用css变量

创建一个css变量，例如，让我们调用它--title bg并为每个项目设置它的值

style=“--title bg:url（'+arr[i][3]+'）”

---

您可以选择js解决方案，但我认为这是一个更好的

您无法访问CSS中的js变量。但是，您可以通过JS访问CSS，在JS中执行类似于：

document.getElementById（'your-cell-id'）.style.background=“url（'your-image-path.jpg'）；”

的操作。

wrap.innerHTML += '<tr><td><a href="' + arr[i][1] + '" style="--title-bg: url('+arr[i][3]+')" ' + 'data-title="' + '">' + arr[i][2] + '</a></td><td id="' + 'demo' + (i + 1) + '"></td></tr>'

[data-title]:after {
  ...
  background-image: var(--title-bg);
  ...
}