Replace a style value in javascript

Question

I am looking to change a value in a tag with js.

<div class="class1" style="background-image:url(https://www.awebsite.com/sites/default/files/a_image.jpg?t=1529620960)"></div>

I want to change this :

https://www.awebsite.com/sites/default/files/a_image.jpg?t=1529620960`

to this:

https://hello.com/an-other-image.jpg

Thanks !

Your question seems unclear.On what action do you want to replace ? Is it on click of button or something? — Vinit Desai
– Vinit Desai, Commented Sep 21, 2018 at 16:22
Possible duplicate of how to change the background image of div using javascript? — Joseph Webber
– Joseph Webber, Commented Sep 21, 2018 at 16:26
It looks like you want us to write some code for you. While many users are willing to produce code for a coder in distress, they usually only help when the poster has already tried to solve the problem on their own. A good way to demonstrate this effort is to include the code you've written so far, example input (if there is any), the expected output, and the output you actually get (console output, tracebacks, etc.). The more detail you provide, the more answers you are likely to receive. Check the FAQ and How to Ask. — Austen Holland
– Austen Holland, Commented Sep 21, 2018 at 16:29

Ken Colton · Accepted Answer · 2018-09-21 16:35:20Z

4

You can use document.querySelector to get a reference to the <div> element and then update it's style attributes.

// querySelector can use CSS selectors to find the element in the document
// note: this is assuming there is only 1 element on page with this class
var myDiv = document.querySelector('.class1');
// Style properties generally match CSS but camel cased
myDiv.style.backgroundImage = 'url("https://hello.com/an-other-image.jpg")';

You may want to consider adding an id in which case you can use an ID selector or document.getElementById.

If there are multiple elements you want to update, you can use document.querySelectorAll which will return an array of matches which you can loop over and change.

function changeToAnotherBgImage(element) {
    element.style.backgroundImage = 'url("https://hello.com/an-other-image.jpg")';
}
// Plenty of alternate ways of writing, arrow function may be appropriate
document.querySelectorAll('.class1').forEach(changeToAnotherBgImage);

edited Sep 21, 2018 at 16:35

answered Sep 21, 2018 at 16:32

Ken Colton

1,05610 silver badges15 bronze badges

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

3 Comments

evolutionxbox Over a year ago

What if the class is applied to multiple elements? Not that the OP thought about that.

Ken Colton Over a year ago

@evolutionxbox Added a note about querySelectorAll - good calloout :)

Starrrry Over a year ago

It works well ! Thank you for taking the time to help me, I really learned something. I think I will take JS lessons, I did not think we could do this type of things (querySelector and the .style.backgroundImage)

Joaopedrofn · Accepted Answer · 2018-09-21 16:30:19Z

4

You can do something like:

c = document.getElementsByClassName('class1');
for(i = 0; i < c.length; i++){
    c[i].style.backgroundImage = 'url(https://hello.com/an-other-image.jpg)';
}

answered Sep 21, 2018 at 16:30

Joaopedrofn

494 bronze badges

2 Comments

Sarah Over a year ago

I agree with this solution. I just tested it and it worked for me.

Ken Colton Over a year ago

This works but is missing var or let for variable declarations. forEach is also widely supported and removes the tedium of an index variable. Really el.style.backgroundImage is the core part anyway, but just fyis that may be helpful :)

Mohamed Elshahawy · Accepted Answer · 2018-09-21 16:54:41Z

0

You can do that:

const eleDiv =document.querySelector('.class').style.background = "url('your imge') no-repeat";

answered Sep 21, 2018 at 16:54

Mohamed Elshahawy

1131 gold badge1 silver badge7 bronze badges

Collectives™ on Stack Overflow

Replace a style value in javascript

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related