更改点击按钮的颜色
我有两个用户可以点击的按钮。目标是让用户能够点击按钮并使其改变我已完成的颜色。但问题是,我想要颜色返回到原来的颜色,当他们点击另一个按钮,反之亦然。这是我的代码。更改点击按钮的颜色
<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";
});
您需要重置其他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>
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>
这是我在我的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>
找?
设置背景颜色:''点击其他按钮。 –