javascript - document.body.style.backgroundImage 不起作用

Question

<分区>

Answer 1

使用jquery

DEMO:

改变

<a id="a" href="roztoky.php" onclick = "document.body.style.backgroundImage = 'url(../img/roztoky.png)';">

顶

$('#a').on('click', function() {
    $('body').css('background-image', 'url(/img/roztoky.png)');
});

和

<a id="b" href="_section/roztoky.php" onclick = "document.getElementById('frame').style.backgroundImage = 'url(img/roztoky.png)';" target="a">

到

$('#b').on('click', function() {
    $('#frame').css('background-image', 'url(img/roztoky.png)');
});

或者使用纯 javascript

DEMO

    var button_a = document.querySelector("#a"),
    button_b = document.querySelector("#b"),
    myframe  = document.querySelector("#frame");
button_a.addEventListener("click",function(e){
    document.body.style["background-image"] = "url(https://c2.staticflickr.com/6/5530/11442019345_d50b753156.jpg)";
},false);
button_b.addEventListener("click",function(e){
    myframe.style.style["background-image"] = "url(https://c2.staticflickr.com/4/3702/11442187163_fdd370b657_n.jpg)";
},false);

HTML::

<a id="a">body background image</a>
<a id="b">change frame background</a>
<div id="frame"></div>

CSS::

#frame{
    width:100%;
    height:320px;
}

a{
    padding: 6px 12px;
    background:#ccc;
    border-radius:6px;
    cursor:pointer;
    color:white;
}