使用 javascript 动态更改

Dynamically change <div> background-image with javascript

本文关键字：动态 javascript 使用      更新时间：2023-09-26
背景图像。

我正在寻找一些帮助来编写一个 javascript 片段，该片段将动态更新div style= "background-image：url..."以匹配其上方的 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...我想我走在正确的轨道上。

你可以使用 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 + ')';
}
相关文章：