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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 09:10:27  来源:igfitidea点击:

Changing a button's background color when it's clicked

javascripthtmlbackground-color

提问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.

上面的代码应该可以工作。