按钮背景颜色 onclick 改变答案

【问题标题】：Button backgorund-color onclick change按钮背景颜色 onclick 改变
【发布时间】：2017-04-14 00:13:57
【问题描述】：

我对一个简单的脚本有疑问。我试图让一个按钮在您单击它时更改其背景颜色。我在这里搜索并用谷歌搜索了它。根据我的发现，我的脚本没有问题。你能帮我解决这个问题吗？

这是我的 CSS 样式表：

body {
    height: 100% 100vh;
    background: linear-gradient(90deg, #122221 50%, #116699 50%);
}
#btn {
    background-color: white;
    width: 200px;
    height: 100px;
}

这是我的html：

<!DOCTYPE html>
<meta charset="UTF-8">
<html lang="en-US">

<html>
    <head>
        <link rel="stylesheet" href="learning.css">
        <script>
            function foo(){
                var x = document.getElementById("btn");
                if (x.style.background-color == "white"){
                    x.style.background-color = "green";
                }
                else {
                    x.style.background-color = "white";
                }
            }
        </script>
    </head>

    <body>
        <button id = "btn" onclick = "foo()"> click me </buttonM>
    </body>
</html>

【问题讨论】：

标签： javascript html css

【解决方案1】：

background-color 应该是 backgroundColor：

function foo(){
  var x = document.getElementById("btn");

  if (x.style.backgroundColor == "white")
  {
    x.style.backgroundColor = "green";
  }
  else {
    x.style.backgroundColor = "white";
  }
}

注意：style.backgroundColor 将在第一次点击时返回一个空字符串，因此最好使用getComputedStyle，因此它会从 CSS 中返回附加到元素的样式。

希望这会有所帮助。

使用getComputedStyle 的片段（从第一次点击开始工作）：

function foo(){
  var x = document.getElementById("btn");
  var bg_color = window.getComputedStyle(x,null).getPropertyValue("background-color");

  if (bg_color == "rgb(255, 255, 255)")
  {
      x.style.backgroundColor = "green";
  }
  else {
      x.style.backgroundColor = "white";
  }
}

body {
    height: 100% 100vh;
    background: linear-gradient(90deg, #122221 50%, #116699 50%);
}
#btn {
    background-color: white;
    width: 200px;
    height: 100px;
}

&lt;button id="btn" onclick = "foo()"&gt; click me &lt;/button&gt;

【讨论】：

【解决方案2】：

问题在于x.style.background-color。相反，您应该使用x.style.backgroundColor

function foo(){
                var x = document.getElementById("btn");
                if (x.style.backgroundColor == "white"){
                    x.style.backgroundColor = "green";
                }
                else {
                    x.style.backgroundColor = "white";
                }
            }

#btn {
    background-color: white;
    width: 200px;
    height: 100px;
}

 &lt;button id = "btn" onclick = "foo()"&gt; click me &lt;/buttonM&gt;

【讨论】：

【解决方案3】：

语法错误，它的style.backgroundColor 不是style.background-color 。如果条件，只需使用单行。就像下面的sn-p

function foo() {
  var x = document.getElementById("btn");
  x.style.backgroundColor = x.style.backgroundColor == "white" ? "green" : "white";
}

body {
  height: 100% 100vh;
  background: linear-gradient(90deg, #122221 50%, #116699 50%);
}

#btn {
  background-color: white;
  width: 200px;
  height: 100px;
}

<body>
  <button id="btn" onclick="foo()"> click me </buttonM>
    </body>

【讨论】：

【解决方案4】：

您的 javascript 中有错误。您可以使用背景颜色，但您必须引用它并将其放在括号中，如下所示：

<!DOCTYPE html>
<meta charset="UTF-8">
<html lang="en-US">

<html>
    <head>
        <link rel="stylesheet" href="learning.css">
        <script>
            function foo(){
                var x = document.getElementById("btn");
                if (x.style['background-color'] == "white"){
                    x.style['background-color'] = "green";
                }
                else {
                    x.style['background-color'] = "white";
                }
            }
        </script>
    </head>

    <body>
        <button id = "btn" onclick = "foo()"> click me </buttonM>
    </body>
</html>

【讨论】：