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

Question

我想在页面运行时更改我的背景颜色。我已经用 JS 编码了，但没有结果。 JQuery 包含在 head 部分。

 <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()"
       ^

---

挑剔时间:

既然您使用的是 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
});