单击更改元素的背景图像

Question

我想在链接单击时更改页面的正文，标题，菜单和主要块的背景图像。 首先，我正在尝试仅更改身体背景。 我的默认身体背景图像在我的CSS文件中分配：

html, body {
    height:1100px;
}

body {
    width: 100%;
    background-repeat: no-repeat;
    background-size: auto 1150px;
    background-image: url(../Unnamed%20Site%202/ff%20copy7.jpg);
}

我尝试了这个jQuery函数，但是它不起作用。

<!DOCTYPE html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <title>Untitled Document</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="author" content="Your name" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link href="main.css" rel="stylesheet" type="text/css">
        <link href='http://fonts.googleapis.com/css?family=Electrolize'rel='stylesheet' type='text/css' />
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
    </head>
    <body>
        <div class="main">
            <div id="home">
               <div class="menu">
                   <script src="jquery.js"></script>
                   <script>
                   $("#home").click(function() { 
                       $("body").css("backgroundImage", "url(sandpaper.png)");
                   });
                   </script>

     ...Some text into main (box)...
             </div>
         </div>
         ... 

Answer 1

准备好文档后设置事件功能：

$(document).ready(function() {
    $('#home').click(function() {
        $('body').css('background-image', "url('sandpaper.png')");
    });
});

Answer 2

您的代码必须是：

$("body").css("background-image", "url('sandpaper.png')");

另外，我是否建议改用.addClass() .removeClass()或.toggleClass函数？ 他们提供了更清洁的解决方案。

Answer 3

尝试更改：

$("body").css("backgroundImage", "url(sandpaper.png)");

至：

$("body").css("background-image", "url(sandpaper.png)");

Answer 4

就如此容易：

$("body").css("background-image", "url(sandpaper.png)");

或者，如果您想按照自己的方式做：

$("body").css({
   backgroundImage: "url(sandpaper.png)"
});

Answer 5

看来您需要更改：

$("body").css("backgroundImage", "url(sandpaper.png)");

至：

 $("body").css("background-image", "url(sandpaper.png)");

Answer 6

谢谢大家的帮助。 我解决了 我在css文件BG类中创建了：

.bg1 { background: url(sandpaper.png) repeat-x; }

我用了jQuery脚本：

$(document).ready(function(){ 

        $("#link-home").click( function(){ $
        ("body").addClass("bg1");
    });