更改點擊按鈕的顏色

我有兩個用戶可以點擊的按鈕。目標是讓用戶能夠點擊按鈕並使其改變我已完成的顏色。但問題是，我想要顏色返回到原來的顏色，當他們點擊另一個按鈕，反之亦然。這是我的代碼。更改點擊按鈕的顏色

<div id='rightAlign'> 
    <div id="but1"> 
     <button id="button1">Click Me</button> 
     <button id="button2">Click Me</button> 
    </div> 
</div> 


<script> 
    var button1 = document.getElementById("button1"); 
    var button2 = document.getElementById("button2"); 

    button1.addEventListener("click", function() { 
     button1.style.backgroundColor = "red"; 

     button2.addEventListener("click", function() { 
      button2.style.backgroundColor = "red"; 


     });

來源

2017-04-11 rayjay

設置背景顏色：''點擊其他按鈕。 –

您需要重置其他button。嘗試以下方法：

var button1 = document.getElementById("button1"); 
 
var button2 = document.getElementById("button2"); 
 
var button1Default, button2Default; 
 
button1Default = button1.style.backgroundColor; 
 
button2Default = button2.style.backgroundColor; 
 

 
button1.addEventListener("click", function(){ 
 
    button1.style.backgroundColor = "red"; 
 
    button2.style.backgroundColor = button2Default; 
 
}); 
 

 
button2.addEventListener("click", function(){ 
 
    button2.style.backgroundColor = "red"; 
 
    button1.style.backgroundColor = button1Default; 
 
});

#button1,#button2 { padding: 15px 25px; font-size: 24px; text-align: center; cursor: pointer; outline: none; color: #fff; background-color: #4CAF50; border: none; border-radius: 15px; box-shadow: 0 9px #999; } 
 
#button1:hover {background-color: #3e8e41} 
 
#button1:active { box-shadow: 0 5px #666; transform: translateY(4px); }

<div id='rightAlign'> 
 
    <div id="but1"> 
 
    <button id="button1" onclick="">Click Me</button> 
 
    <button id="button2">Click Me</button> 
 
    </div> 
 
</div>

來源

2017-04-11 04:34:18 Mamun

如果OP已經爲按鈕設置了背景色，該怎麼辦？像'＃button1 {background：green; }' – Tushar

@Tushar它已經被定義爲該元素的「默認背景顏色」，並將被設置爲該顏色。只要您具備JavaScript和CSS的基本知識，就符合邏輯。 –

@TyQ。真正。我的錯。 – Tushar

var button1 = document.getElementById("button1"); 
 
var button2 = document.getElementById("button2");  
 

 
button1.addEventListener("click", function(){ 
 
button1.style.backgroundColor = "red" 
 
button2.style.backgroundColor = '' 
 
}) 
 

 
button2.addEventListener("click", function(){ 
 
button2.style.backgroundColor = "red" 
 
button1.style.backgroundColor = '' 
 
})

<div id='rightAlign'> 
 
    <div id="but1"> 
 
    <button id="button1">Click Me</button> 
 
    <button id="button2">Click Me</button> 
 
    </div> 
 
</div>

來源

2017-04-11 04:36:29

這是我在我的CSS中。＃button1 { padding：15px 25px; font-size：24px; text-align：center;光標：指針; 概要：無; color：#fff; background-color：＃4CAF50; border：none; border-radius：15px; box-shadow：0 9px＃999; } ＃按鈕1：懸停{背景色：＃3e8e41} ＃按鈕1：活性{ 箱陰影：0 5像素＃666; transform：translateY（4px）; } – rayjay

@rayjay css在使用javascript進行更改時不會產生任何影響。只是懸停效果會相同。發佈你的CSS並完成你想要實現的問題 –

這是你在找什麼？

var button1 = document.getElementById("button1"); 
 
var button2 = document.getElementById("button2"); 
 

 
button1.addEventListener("click", function(){ 
 
    button1.style.backgroundColor = "red"; 
 
    button2.style.backgroundColor = ""; 
 
}); 
 

 
button2.addEventListener("click", function(){ 
 
    button2.style.backgroundColor = "red"; 
 
    button1.style.backgroundColor = ""; 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
</head> 
 
<body> 
 
    <button id="button1">Click Me</button> 
 
    <button id="button2">Click Me</button> 
 
</body> 
 
</html>

找？

來源

2017-04-11 04:37:27

更改點擊按鈕的顏色

回答

相關問題