HTML中的JavaScript正在改变背景

JavaScript in HTML changing background

本文关键字：改变 背景 中的 JavaScript HTML      更新时间：2023-09-26

我不知道自己在做什么。我以为html一切都很好，然后我不得不添加一些简单的javascript。当用户点击按钮时，我只是想改变背景颜色。

这就是我目前所拥有的：

CSS

body {
    background-color:grey;
}

Javascript

function changeBackground() {
    if (document.body.style.backgroundColor = 'grey')
    {
        document.body.style.backgroundColor = 'black';
    }
    else
    {
        document.body.style.backgroundColor = 'grey';
    }
}

Html

<button type="button" onclick="changeBackground()">
    Click Me!
</button>

您的if子句错误（您正在分配而不是测试背景色）：

function changeBackground() {
    if (document.body.style.backgroundColor == 'grey'){
        document.body.style.backgroundColor = 'black';
    } else {
        document.body.style.backgroundColor = 'grey';
    }
}

Richard，我将提供一个替代所有其他答案的方案，您应该在开发的所有web前端中考虑以下结构。

HTML是您显示的东西，JS是它的行为方式，CSS是它的风格。

也就是说，尽量避免使用JS为元素设置样式，而是切换一个类并允许CSS来完成这项工作。在你的情况下，你可以写：

function changeBackground()
{
   $(body).toggleClass('dark');
}
<button type="button" onclick="changeBackground()">
   Click Me!
</button>
body
{
   background-color: grey;
}
body.dark
{
   background-color: black;
}

在这里，我们只需在body元素上和下切换一个类，CSS就会相应地"响应"。我们有一个很好的清晰的关注分离。

你可以选择你的类名比dark更有意义，但这个想法是你的JS不在乎颜色和样式的细节。

尝试：

$("button").click(function(){
  $("body").css("background-color", "blue");
});

尝试FIDDLE、

问题是您使用的是assignment operator =而不是comparison operator == or ===

function changeBackground() {
  if (document.body.style.backgroundColor == 'grey') {
    document.body.style.backgroundColor = 'red';
  } else {
    document.body.style.backgroundColor = 'grey';
  }
}

希望这对你有效

相关文章：