Question

我遇到一个简单的脚本问题。我点击它时试图让一个按钮改变它的背景颜色。我在这里搜索并用Google搜索。根据我的发现，我的脚本没有任何问题。你能帮我解决这个问题吗？

这是我的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>

Answer 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中附加到该元素的样式。< / p>

希望这有帮助。

使用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;
}

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

Answer 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;
}

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

Answer 3

语法是错误的style.backgroundColor而不是style.background-color。如果condition.just就像下面的代码段那样只使用单行

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>

Answer 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>

按钮backgorund-color onclick更改

4 个答案: