Question

抱歉，我是菜鸟：/。我试图使用切换功能，但是我也可以通过按钮来了解如何来回更改背景颜色。

我的HTML：

    <!Doctype html>
    <html>
    <head>
    <title>Public Vision</title>
    <link rel="stylesheet" type="text/css" title="backbone" href="backbone.css">
    <link rel="alternative stylesheet" type="text/css" title="alt" href="alt.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <script type="text/javascript" src="script.js"></script>

    </head>
    <body class="style2">
    <div id="header"><div id="header2">Public Vision</div></div>
    <iframe width="640" height="400" 
     src="https://www.youtube.com/embed/videoseries?list=PLX9_I-EOJPdFuOjcI2zkmTck55homHEBE" frameborder="2" allowfullscreen></iframe>

    <input type="image" src="off.jpeg " height="3%" width="2%" alt="On" onclick="toggle()">
    </body>
    </html>

我的JavaScript：

    <script>
    function toggle(){
    $('body').toggleClass('style2');
     }

    </script>

我的css：

header { height: 15%; width: 100%; background-color: white; z-align: 2; position: fixed; right:0; top:0; margin-bottom:5px;
 background-color: clear;

 box-shadow: 0 4px 4px -2px #232323;
-moz-box-shadow: 0 4px 4px -2px #232323;
-webkit-box-shadow: 0 4px 4px -2px #232323;
}
#header2{height: 15%; width: 100%; position: fixed; color:grey; opacity:   0.6; text-align: center; z-align: 3; font-size: 30px; margin-top: 2.5%;}
iframe {display:block; margin: 0 auto; margin-top: 17%;}


body{
background-color:white;
}

 .style2 body{
background-color:grey;
}

Answer 1

您的css是指.style2 body，它正在查找包含body类的元素内的.style2元素。如果您希望仅在body类具有style2时设置样式，则它将如下所示

body.style2 { background-color: grey; }

Answer 2

如果您尝试更改body的背景颜色，可以尝试

$("body").css("background-color","grey");

因此，您的toggle功能将变为

<script>
    function toggle(){
        $("body").css("background-color","grey");
    }
</script>

Answer 3

为什么不这样简单！：

<html>
<head>
    <title>STACK OVERFLOW TESTS</title>
    <style>
        body{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <input type = 'button' value = 'CLICK ME FOR CHANGE COLOR!' onClick = 'changeColor()'></input>
    <script>
        function changeColor(){
            var body = document.querySelector('body');

            if(body.style.backgroundColor == 'yellow'){
                body.style.backgroundColor = 'green';
            }
            else{
                body.style.backgroundColor = 'yellow';
            }
        }
    </script>
</body>
</html>

Answer 4

这就是我要做的事（不可否认，这不是最佳解决方案，但可以完成工作）

Html（按钮）

<input type="image" src="off.jpeg " height="3%" width="2%" alt="On" class="bg-toggle">

的jQuery

$('.bg-toggle').click(function(){
    if ($(this).hasClass('bgMod')) {
        $(this).toggleClass('bgMod');
        $('body').css('background-color', 'white');
    }else{
        $(this).toggleClass('bgMod');
        $('body').css('background-color', 'grey');
    }
});

这个问题的最大缺陷是，如果你对background-color进行任何更改，在你的CSS中它们将不会有任何影响。您可以为$('body').css('background-color', '???');更改$('body').toggleClass('style2');，但请确保修改您的css：

.style2 body{
    background-color:grey;
}

到此：

body .style2{
    background-color:grey;
}

否则它会寻找<element class="style2"><body>，它应该在哪里寻找<body class="style2">。

如何使用一个按钮切换HTML文档正文的背景颜色？

4 个答案: