Question

我正在寻找一些帮助，编写一个javascript片段，动态更新div style =“background-image：url ...”以匹配上面的href。这是一个投资组合网站，所以这是一个图库，所有图像都是一次性的。我需要使用代码段来遍历每个人a href和嵌套div，并让它们匹配，每个图片都是唯一的（不要想要同一张图片的页面20次）我刚刚开始学习JS，所以我一直在努力学习这个。这是html。

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

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

<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 ......我想我已走上正轨。

Answer 1

您可以结合使用querySelector()和var targetDiv = document.querySelector('#matcher'); var url = targetDiv.parentNode.href; targetDiv.style.backgroundImage = 'url(' + url + ')';属性来获取所需内容：

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

或者您也可以使用：

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

第二个选项不依赖于文档的结构，但会导致JS再次查看整个文档。

如果您使用的是jQuery：

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

Live Example

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

0000-00-00

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

1 个答案: