Question

我已经通过CSS文件在body部分实现了一个背景图像，并且它有效。但是，我需要根据用户点击的标签更改此图片。

现在我认为这很简单，在阅读并尝试了很多帖子中的解决方案后，我无法弄清楚我哪里出错了。

所以基本上我的主要设置是：

CSS：

body {
background-image: url(/bg04.png);
}

这可以显示背景图像。

现在，当有人点击标签时，我尝试更改代码中改变整个场景的bg图像：

var activate_doodle = function(e) {
     if (e) {
         e.preventDefault();
     }

     $("#text_input_container").css("display", "none");
     $("#doodle_input_container").css("display", "block");
     $("#change_keyboard").removeClass("active");
     $("#change_doodle").addClass("active");
     document.getElementById("colorPicker").click();

     $('body').css('background-imgage','url(http://example.com/bg04-2.png');

};

但它不会改变图像。我尝试将绝对URL复制并粘贴到我的浏览器中，并且pic的路径是正确的。

我也尝试将它从我的CSS中删除，将整个事情放在我的初始化JS序列中，然后在点击事件中使用相同的行。

我真的很感谢你的帮助。

感谢。

Answer 1

'background-im的 g age'
从属性中删除g - 它应为background-image：

$('body').css('background-image','url(http://example.com/bg04-2.png');

Answer 2

也许您输入错误

$('body').css('background-image','url(http://example.com/bg04-2.png)');

Answer 3

document.getElementById("colorPicker").click( function(e) {
if (e) {
    e.preventDefault();
}

$("#text_input_container").css("display", "none");
$("#doodle_input_container").css("display", "block");
$("#change_keyboard").removeClass("active");
$("#change_doodle").addClass("active");
$('body').css('background-image','url(http://example.com/bg04-2.png');

}）

可能会尝试添加事件监听器。

如何使用jQuery更改body元素的背景图像

3 个答案: