页面运行时更改正文背景图像

Question

我正在尝试在页面运行时更改背景颜色。 我已经用JS编码了，但是没有结果。 jQuery包含在头部。

 <ul>
            <li><a href="#" onClick=="one()"><img src="img/dot_active.png" /></a></li>
            <li><a href="#" onClick=="two()"><img src="img/dot_inactive.png" /></a></li>
            <li><a href="#" onClick=="three()"><img src="img/dot_inactive.png" /></a></li>
 </ul>  

这是我的JS。

<script>

function one(){
$('body').css('background-image','url(img/1.jpg');
}

function two(){
document.getElementById('body').style.backgroundImage = 'url(img/1b.jpg)';
}

function three(){
$('body').css('background-image','url("img/1c.jpg"');
}

</script>

Answer 1

您的代码中有错字

onClick=="one()"
       ^

---

NitPick时间：

由于您使用的是jQuery，为什么要使用内联事件处理程序？

使用单击处理程序和数据属性

HTML：

<ul id="foo">
   <li><a href="#" data-bg="img/1.jpg">A</a></li>
   <li><b href="#" data-bg="img/1b.jpg">B</a></li>
   <li><c href="#" data-bg="img/1c.jpg">C</a></li>
</ul>

JavaScript ：（已附加在文档上）

$("#foo").on("click","a", function(evt) { //attach clickc to parent ul and look for click on the anchor
    evt.preventDefault();  //cancel click
    var anchor = $(this);  //get link that was clicked
    var bgImg = anchor.data("bg"); //get the data attribute value from the clicked link
    $("body").css("background-image", "url(" + bgImg + ")");   //set the image
});

Answer 2

尝试这个 ：

document.body.style.backgroundImage="url('img/1.jpg')";