Question

我正在尝试使用JavaScript更改按钮的background-color属性。该脚本检查当前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";
    }
}

这就是我在html中传递的内容：

<input type="button" id="btnHousing" value="Housing" onclick="toggleLayer('transparent1');btnColor('btnHousing','#fff200');" />

toggleLayer是我正在使用的另一个功能，它完全正常。我似乎无法弄清楚为什么它不起作用。

Answer 1

我在JsBin中做了一个工作示例：LINK HERE

我将该函数重命名为setColor
我通过window.getComputedStyle（property）修改了property.style.background-color属性.backgroundColor

Answer 2

为什么不直接使用jQuery？

核心Javascript太原始了！如果您只是更改背景颜色，请使用jQuery中的on click事件：

$('#btnHousing').click(function() {
    //Now just reference this button and change CSS
    $(this).css('background-color','#f47121');
});

就个人而言，它比原始javascript读得好得多。

此致

Answer 3

在javascript中尝试此功能：

function setColor(btn,color){
    var property=document.getElementById(btn);
    if (property.style.backgroundColor == "#f47121") {
        property.style.backgroundColor = color;
    } else {
        property.style.backgroundColor = "#f47121";
    }
}

为避免在onclick属性中重复输入的ID，您可以执行以下操作：

HTML：

<input type="button" id="btnHousing" value="Housing" onclick="toggleLayer('transparent1');btnColor(this, '#fff200');" />

JavaScript（小心，var名称区分大小写，参见Color =＆gt; color）：

function setColor(btn, color){
    if (btn.style.backgroundColor == "#f47121") {
        btn.style.backgroundColor = color;
    } else {
        btn.style.backgroundColor = "#f47121";
    }
}

Answer 4

将您的代码更改为此...

function btnColor(btn, color) {
    var property = document.getElementById(btn);
    if (property.style.backgroundColor == "#f47121") {
        property.style.backgroundColor = Color;
    } else {
        property.style.backgroundColor = "#f47121";
    }
}

连接的css属性是JS中的驼峰。例如background-color变为 - ＆gt; backgroundColor

以上代码应该有效。

单击按钮时更改按钮的背景颜色

4 个答案: