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>
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>
- The last (third) attempt looks to be correct... are you sure the image 2.jpg exists and is in the same directory as the HTML file? – Hamza Kubba Commented Apr 25, 2014 at 3:19
- Are you opposed to using jQuery? – sheriffderek Commented Apr 25, 2014 at 3:32
2 Answers
Reset to default 5document.querySelector(".A").style.background="url('2.jpg')";
I fully tested that code and it works.
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 ma 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)'
});
});