单击时更改元素的背景图像答案

【问题标题】：Change background image of elements on click单击时更改元素的背景图像
【发布时间】：2014-03-22 03:38:33
【问题描述】：

我想在点击链接时更改页面的正文、标题、菜单和主要块的背景图像。首先，我正在尝试仅更改身体背景。我的默认正文背景图像在我的 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>
         ...

【问题讨论】：

$("body").css("background-image", "url(sandpaper.png)");
@Morpheus ：随意把它作为答案，因为它是一个答案
我的错，谢谢，但不能解决问题
@Morpheus That doesn't matter to jQuery.
你看过你自己发的文章了吗？

标签： javascript jquery html css background

【解决方案1】：

在文档准备好后设置事件函数：

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

【讨论】：

感谢 $(document).ready(function() { 它可以工作，但我必须双击链接以更改背景。您不知道如何解决？
我不完全确定为什么您必须单击它两次。但是，我建议您在 <head> 或 HTML 底部声明您的 <script> 标签。
我试过了。我点击链接（背景仍然是默认的），之后我必须点击网站上的任何地方以更改背景。

【解决方案2】：

您的代码必须是：

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

另外，我可以建议使用 .addClass() .removeClass() 或 .toggleClass 函数吗？它们提供了更清洁的解决方案。

【讨论】：

我使用了 .addClass，现在它可以完美运行了。谢谢你。但它在 IE 中不起作用。

【解决方案3】：

尝试改变：

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

到：

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

【讨论】：

【解决方案4】：

就这么简单：

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

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

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

【讨论】：

【解决方案5】：

看起来你需要改变：

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

收件人：

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

【讨论】：

它对我没有帮助。它不会改变背景。

【解决方案6】：

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

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

我使用 jquery 脚本：

$(document).ready(function(){ 

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

【讨论】：