admin管理员组

文章数量:1307767

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>
  • javascript
  • css
  • html
  • jquery-selectors
  • background-image
Share Improve this question asked Apr 25, 2014 at 3:11 CindyCindy 1011 gold badge1 silver badge7 bronze badges 2
  • 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
Add a ment  | 

2 Answers 2

Reset to default 5 
document.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)'
    });    
});

本文标签： javascriptHow to change background image with the help of querySelectorStack Overflow

版权声明：本文标题：javascript - How to change background image with the help of querySelector - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741768857a2396628.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。