如何使用jQuery单击时更改正文元素的背景图像

How to change background image of body element on click with jQuery

本文关键字：元素 正文 背景 图像 何使用 jQuery 单击      更新时间：2023-09-26

我已经通过CSS文件在正文部分实现了背景图像，它起作用了。但是，我需要根据用户单击的选项卡更改此图像。

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

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

.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复制并粘贴到浏览器中，图片的路径是正确的。

我还尝试将其从我的 CSS 中取出，将整个内容放在我的初始化 JS 序列中，然后在点击事件中使用相同的行。

我真的很感谢你们的帮助。

谢谢。

'background-im g age'
从属性中删除g — 它应该是background-image：

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

也许你输入错误

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

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

};)

可以尝试添加事件侦听器。

相关文章：