[英]Change background-image of a class dynamically on a date using javascript/Jquery?
[英]Dynamically change <div> background-image with javascript
我正在寻找一些帮助,编写一个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 + ')';
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.