按钮backgorund颜色onclick变化

我有一个简单的脚本的问题。我试图让一个按钮改变它的背景颜色，当你点击它。我在这里搜索并搜索了它。根据我所发现的，我的剧本没有错。你能帮我解决这个问题吗？按钮backgorund颜色onclick变化

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

来源

2017-04-13 4SapH

问题是与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>

来源

2017-04-13 14:19:51

的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所以它会返回附加的样式o来自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; 
 
}

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

来源

2017-04-13 14:20:07

语法错了style.backgroundColor不style.background-color。而只需用if条件单行使用。就像下面的片段

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>

来源

2017-04-13 14:21:31 prasanth

你在你的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>

来源

2017-04-13 14:28:10 gforce301

按钮backgorund颜色onclick变化

回答

相关问题