javascript 按钮背景颜色切换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17050054/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Button background color toggle
提问by ayush
I have been trying to toggle the background-color property of a button onclick but the color only changes once and does not toggle back and forth. Below is the code.
我一直在尝试切换按钮 onclick 的背景颜色属性，但颜色只更改一次并且不会来回切换。下面是代码。
function btnColor(btn, color) {
var property = document.getElementById(btn);
if (property.style.backgroundColor == "rgb(244,113,33)") {
property.style.backgroundColor=color;
}
else {
property.style.backgroundColor = "rgb(244,113,33)";
}
}
<input type="button" id="btnHousing" value="Housing" onclick="toggleLayer('transparent1');btnColor('btnHousing','rgb(255,242,0)');" />
回答by David says reinstate Monica
The problem you're having is that the background-colorof an element is reported differently in browsers, either rgb, rgba (with, or without, spaces) in hex or in HSL...
您遇到的问题是background-color浏览器中元素的报告方式不同，无论是 rgb、rgba（带或不带空格），十六进制还是 HSL ......
So the button will likely never satisfy the ifcondition, meaning it will alwaysgo to the else.
所以按钮可能永远不会满足if条件，这意味着它总是会转到else.
With that in mind, I'd suggest using a class-name to keep track of the un/toggled state:
考虑到这一点，我建议使用类名来跟踪未/切换状态：
function btnColor(btn, color) {
var property = document.getElementById(btn);
if (property.className !== 'toggled') {
property.style.backgroundColor=color;
property.className = 'toggled'
}
else {
property.style.backgroundColor = "rgb(244,113,33)";
property.className = '';
}
}
Of course, if we're using the classof the element, we might as well use CSS to stylethe element:
当然，如果我们使用class元素的 ，我们不妨使用 CSS 来设置元素的样式：
function btnColor(btn) {
var property = document.getElementById(btn);
if (property.className !== 'toggled') {
property.className = 'toggled'
}
else {
property.className = '';
}
}
With the CSS:
使用 CSS：
#btnHousing {
background-color: rgb(255,242,0);
}
#btnHousing.toggled {
background-color: rgb(244,113,33);
}
The previous JavaScript could be simplified (using the same CSS) to:
以前的 JavaScript 可以简化（使用相同的 CSS）：
function btnColor(btn) {
var property = document.getElementById(btn);
property.className = 'toggled' == property.className ? '' : 'toggled';
}
回答by Alex
A simple solution (JS, CSS and HTML in order). You setup a class in CSS, then select the button (yes the JS could have been done in one line) and toggle the class.
一个简单的解决方案（依次为 JS、CSS 和 HTML）。您在 CSS 中设置一个类，然后选择按钮（是的，JS 可以在一行中完成）并切换类。
var button1 = document.querySelector("button");
button1.addEventListener("click", function() {
document.body.classList.toggle("colorred");
});.colorred {
background-color: red;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Change color to background</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<button>Click me!</button>
<script src="main.js"></script>
</body>
</html>回答by Jayram
if(document.getElementById(id).style.background !== 'rgb(0, 0, 0)')
