按鈕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變化

回答

相關問題