使用JavaScript动态更改<div>的背景图片

Question

使用JavaScript动态更改<div>的背景图片

5

我需要帮助编写一个JavaScript代码片段，它可以动态更新一个div的样式="background-image:url..."以匹配上面的a href。这是一个作品集网站，因此这是一个画廊，所有图像都同时在线。我需要该代码片段运行每个单独的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... 我认为我正在走上正确的轨道。

- tman091

你是在寻找纯JS还是可以使用jQuery？ - ljlozano

最好使用纯JS...我想。到目前为止，我尝试了几种不同的方法，主要是使用getElementById...我以为可以通过这种方式获取href，但似乎不起作用。WebStorm不喜欢href。然而，它对“.style.backgroundImage”很友好。所以我可以获取div的“style”，但不能获取a href...如果这样说得通的话。 - tman091

1

看看我对原帖所做的更改...哈哈 - tman091

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pabs123 · Accepted Answer

你可以使用 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 + ')');

实时示例

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

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 + ')';
}