使用 javascript 动态更改 <div> 背景图像

Posted 2023-03-05

【中文标题】使用 javascript 动态更改 <div> 背景图像

【英文标题】：Dynamically change <div> background-image with javascript

【发布时间】：2016-05-06 15:56:48

【问题描述】：

我正在寻找一些帮助，编写一个 javascript sn-p，它将动态更新 div style= "background-image:url..." 以匹配它上面的 a href。这是在投资组合网站上，所以这是一个所有图像都同时存在的画廊。我需要 sn-p 遍历每个人 a href 并在其下方嵌套 div 并让它们匹配，每个图像都是唯一的（不想要同一页的同一图片 20 次） 我刚开始学习JS，所以我一直在努力解决这个问题。这是html。

<a id ="tobematched" href="imgs/galleryphotos/1.jpg">

这个href应该从上面复制到下面的div样式url。

<div id ="matcher" class="img-container" style="background-image: url('imgs/notcorrect/currently.jpg');"></div>
</a>

这就是整体的样子……

<a id ="tobematched" href="imgs/galleryphotos/1.jpg">
    <div id ="matcher" class="img-container" style="background-image: url('imgs/notcorrect/currently.jpg');"></div>
</a>

任何帮助将不胜感激！

到目前为止，这就是我的想法......

function abc() 
    var a = document.getElementById("tobematched").
    var b = document.getElementById("matcher").style.backgroundImage;

                        

不知道从哪里开始，因为我不知道如何获取href...我想我在正确的轨道上。

【问题讨论】：

你是在找纯JS还是jquery好用？

纯 JS 最好……我想。到目前为止，我尝试了一些不同的东西，主要是使用 getElementById ... 我想我可以通过这种方式获取 href，但这似乎不起作用。 WebStorm 不喜欢 href。但是，“.style.backgroundImage”很酷。所以我可以抓住 div 的“风格”，但不能抓住 a href……如果这有意义的话

查看原始帖子的更改。让我们看看我在做什么......哈哈

【参考方案1】：

您可以结合使用querySelector() 和.href 属性来获得所需的内容：

var targetDiv = document.querySelector('#matcher');
var url = targetDiv.parentNode.href;
targetDiv.style.backgroundImage = 'url(' + url + ')';

您也可以使用：

var url = document.querySelector('#tobematched').href

第二个选项不依赖于文档的结构，而是让JS再次浏览整个文档。

如果您使用的是 jQuery：

var url = $('#tobematched')attr('href');
$('#matcher').css('background-image', 'url(' + url + ')');

Live Example

---

编辑：根据 OP 在 cmets 中的进一步描述，这是您实际需要的代码：

var targetDivs = document.querySelectorAll('.img-container');

for (var i = 0; i < targetDivs.length; i++) 
  var url = targetDivs[i].parentNode.href;
  targetDivs[i].style.backgroundImage = 'url(' + url + ')';

【讨论】：

如果我在后面重复几行相同的代码结构，这会起作用吗？这是给我正在工作的画廊的。对于每个图像，“匹配器”需要匹配它所嵌套的 。

如果你使用id来匹配，每个元素都是唯一的，因为id的属性必须是唯一的。

所以如果我理解正确，那么每次我有另一个图像时，我都需要一个不同且唯一的“id”。有一个更好的方法吗？顺便感谢您的帮助。

也许最好使用class 而不是id

成功了！我只是有一些拼写是关闭的。感谢您的帮助！