更改点击按钮的颜色

我有两个用户可以点击的按钮。目标是让用户能够点击按钮并使其改变我已完成的颜色。但问题是，我想要颜色返回到原来的颜色，当他们点击另一个按钮，反之亦然。这是我的代码。更改点击按钮的颜色

<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

更改点击按钮的颜色

回答

相关问题