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

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')";

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

2 个答案:

NitPick时间：