Html 单击时更改按钮的背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16966088/
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
Changing a button's background color when it's clicked
提问by ayush
I'm trying to change the background-colorproperty of a button using JavaScript. The script checks what the current background-coloris set to and then toggles it.
This is the JavaScript code:
我正在尝试background-color使用 JavaScript更改按钮的属性。该脚本检查电流background-color设置为什么，然后切换它。这是 JavaScript 代码：
function btnColor(btn,color) {
var property=document.getElementById(btn);
if (property.style.background-color == "#f47121") {
property.style.background-color=Color;
}
else {
property.style.background-color = "#f47121";
}
}
and this is what I pass in html:
这就是我在 html 中传递的内容：
<input type="button" id="btnHousing" value="Housing" onclick="toggleLayer('transparent1');btnColor('btnHousing','#fff200');" />
toggleLayeris another function I am using, which works perfectly fine.
I can't seem to figure out why it doesn't work.
toggleLayer是我正在使用的另一个功能，它工作得很好。我似乎无法弄清楚为什么它不起作用。
回答by forumma
I made a working example in JsBin : LINK HERE
我在 JsBin 中做了一个工作示例：链接这里
- I renammed the function to setColor
- I changed the property property.style.background-color by window.getComputedStyle(property).backgroundColor
- 我将函数重命名为 setColor
- 我通过 window.getComputedStyle(property).backgroundColor 更改了属性 property.style.background-color
回答by Tez Wingfield
Why not just use jQuery?
为什么不直接使用 jQuery？
Core Javascript is so raw! If you're just changing the background-color then use the on click event in jQuery:
核心 Javascript 太原始了！如果您只是更改背景颜色，请使用 jQuery 中的 on click 事件：
$('#btnHousing').click(function() {
//Now just reference this button and change CSS
$(this).css('background-color','#f47121');
});
Personally for me it reads so much better then raw javascript.
就我个人而言，它比原始 javascript 读起来要好得多。
Regards
问候
回答by Jocker
Try this function in your javascript :
在你的 javascript 中试试这个功能：
function setColor(btn,color){
var property=document.getElementById(btn);
if (property.style.backgroundColor == "#f47121") {
property.style.backgroundColor = color;
} else {
property.style.backgroundColor = "#f47121";
}
}
To avoid repeating the id of your input in the onclick attribute, you can do this :
为避免在 onclick 属性中重复输入的 id，您可以这样做：
HTML :
HTML :
<input type="button" id="btnHousing" value="Housing" onclick="toggleLayer('transparent1');btnColor(this, '#fff200');" />
JavaScript (be careful, the var names are case sensitive, cf. Color => color) :
JavaScript（注意，var 名称区分大小写，参见 Color => color）：
function setColor(btn, color){
if (btn.style.backgroundColor == "#f47121") {
btn.style.backgroundColor = color;
} else {
btn.style.backgroundColor = "#f47121";
}
}
回答by Seth
Change your code to this...
将您的代码更改为此...
function btnColor(btn, color) {
var property = document.getElementById(btn);
if (property.style.backgroundColor == "#f47121") {
property.style.backgroundColor = Color;
} else {
property.style.backgroundColor = "#f47121";
}
}
Hyphenated css attributes are camel cased in JS.
For example background-colorbecomes -> backgroundColor
连字符的 css 属性在 JS 中是驼峰式的。例如background-color变成->backgroundColor
The above code should work.
上面的代码应该可以工作。
