How to change background image with the help of querySelector

StackOverflow https://stackoverflow.com/questions/23283520

Question

i just wonder how to set the background image of a div block after using the queryselector. Below is my test. But none of this work.......Pls help.

<!DOCTYPE html>
<html>
<body>
<div class="A">
<h1>Hello World!</h1>
<button type="button" onclick="myFunction()">Set background image</button>


</div>
</body>
</html>
<script>
function myFunction()
{
document.querySelector(".A").style.background="yellow"; //work
document.querySelector(".A").style.setProperty("backgroundImage", "url('2.jpg')")// not work
document.querySelector(".A").style.backgroundImage = "url('2.jpg')" //not work
}
</script>
Was it helpful?

Solution 

document.querySelector(".A").style.background="url('2.jpg')";

I fully tested that code and it works.

OTHER TIPS

Here is a jsFiddle that might help you.

There are many syntax for writing the styles which is silly and confusing. backgroundImage vs background-image : vs background-image, vs backgroundImage => urg... silly.

I just always use the array version below for consistency.

I also use jQuery because it solves cross browser issues and is just easier to write.

document.querySelector(".your-selector").style.background="yellow";
is then the same as
$('.your-selector').css('background', yellow');


HTML

<button class="thing01">Set background image01</button>

<button class="thing02">Set background image02</button>


CSS

body {
    background: gray;
}


jQuery

// on document ready... 

// for just one property... 
$('body').css('background', 'url(http://placehold.it/400x400/00ff66)');

/* This is syntax for multiple properties... note the comma on all but last and : vs , 
$('body').css({
    'background'       : 'url(http://placehold.it/400x400/00ff66)',
    'background-size'  : 'cover'
});
*/

$('.thing01').on('click', function() {
    $('body').css({
        'background' : 'url(http://placehold.it/400x400/ff0066)'
    });    
});

$('.thing02').on('click', function() {
    $('body').css({
        'background' : 'url(http://placehold.it/400x400/6600ff)'
    });    
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top