document.body.style.backgroundImage does not work

Question

我有一个document.body.style.backgroundImage标记问题。 它在本地完美地唤醒，但不在服务器上。

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

在当地，backgound是没有问题交换，但在服务器上的研究背景卡梅斯起来只是几秒钟，然后它的overwrited回defalut

但如果我把它叫做这样的：

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

它的工作原理...

任何想法？

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; 
}