document.body.style.backgroundImage不起作用

document.body.style.backgroundImage does not works

本文关键字：不起作用 backgroundImage style body document      更新时间：2023-09-26

我对document.body.style.backgroundImage标记有问题。它在本地非常出色，但在服务器上却没有。

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

在本地，后台切换没有问题，但在服务器上，后台只出现了几秒钟，然后被覆盖以破坏

但如果我这样称呼它：

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

它有效。。。

有什么想法吗？

使用jquery

演示：

更改

<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

演示

    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;
}
相关文章：