Dynamically change <div> background-image with javascript

Question

I'm looking for some help writing a javascript snippet that will DYNAMICALLY update a div style= "background-image:url..." to match the a href above it. This is on a portfolio website, so this is a gallery where all the images are live at once. I need the snippet to run through each individual a href and nested div underneath it and have them match, unique to each image (Don't want a page of the same picture 20 times) I'm just starting to learn JS, so I've been struggling with this one. Here's the html.

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

This href should from above should be copied to the div style url below.

<div id ="matcher" class="img-container" style="background-image: url('imgs/notcorrect/currently.jpg');"></div>
</a>

This is what it looks like as a whole...

<a id ="tobematched" href="imgs/galleryphotos/1.jpg">
    <div id ="matcher" class="img-container" style="background-image: url('imgs/notcorrect/currently.jpg');"></div>
</a>

Any help would be greatly appreciated!

This is what I'm thinking, so far...

function abc() {
    var a = document.getElementById("tobematched").
    var b = document.getElementById("matcher").style.backgroundImage;

                        }

Not sure where to go from here, since I don't know how to grab the href... I think I'm on the right track.

pure JS would be best... I think. I have a few different things I've tried so far, mostly with getElementById... I figured I could grab the href that way, but that doesn't seem to work. WebStorm doesn't like href. It is cool with ".style.backgroundImage" however. So I can grab the div's "style", but not the a href... if that makes sense — tman091
– tman091, Commented Jan 29, 2016 at 2:08
see the changes to the original post. let's see how i'm doing... haha — tman091
– tman091, Commented Jan 29, 2016 at 2:13

Pabs123 · Accepted Answer · 2016-01-29 02:50:04Z

3

You can use a combination of querySelector() and the .href property to get what you need:

var targetDiv = document.querySelector('#matcher');
var url = targetDiv.parentNode.href;
targetDiv.style.backgroundImage = 'url(' + url + ')';

Alternatively you can use:

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

This second option does not depend on the structure of the document, but causes JS to look through the whole document again.

If you were using jQuery:

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

Live Example

Edit: As per the further description by OP in the comments, here is the code you actually need:

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

edited Jan 29, 2016 at 2:50

answered Jan 29, 2016 at 2:13

Pabs123

3,43315 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

tman091 Over a year ago

Would this work if I have the same structure of code repeated a few lines later? This is for a gallery I'm working on. For each image, the "matcher" needs to match the <a href> it's nested under.

Pabs123 Over a year ago

if you are using id to match, it will be unique to each element, since id properties must be unique.

tman091 Over a year ago

So if I understand correctly, each time I have another image, I need a different and unique "id" then. Is there a better way to do this? Thanks for your help by the way.

tman091 Over a year ago

Maybe using a class instead of an id would be best

tman091 Over a year ago

It worked! I just had some spelling that was off. I appreciate your help!

|

Collectives™ on Stack Overflow

Dynamically change <div> background-image with javascript

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related