使用javascript动态更改背景图像

2019年7月20日 176次阅读

我正在寻找一些帮助,编写一个
javascript片段,动态地更新div style =“background-image：url …”以匹配它上面的href.这是一个投资组合网站,所以这是一个图库,所有图像都是一次性的.我需要片段来遍历每个个体下面的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 ……我想我正走在正确的轨道上.

最佳答案 您可以使用
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的进一步描述,这是您实际需要的代码：

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