5

我正在尝试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";
    }
}

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

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

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

4

4 回答 4

4

为什么不直接使用 jQuery？

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

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

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

问候

于 2013-06-06T15:32:32.283 回答
3

我在 JsBin 中做了一个工作示例：链接在这里

  • 我将函数重命名为 setColor
  • 我通过 window.getComputedStyle(property).backgroundColor 更改了属性 property.style.background-color
于 2013-06-06T15:31:59.040 回答
2

在您的 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 => color）：

function setColor(btn, color){
    if (btn.style.backgroundColor == "#f47121") {
        btn.style.backgroundColor = color;
    } else {
        btn.style.backgroundColor = "#f47121";
    }
}
于 2013-06-06T15:54:18.273 回答
1

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

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变成 ->backgroundColor

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

于 2013-06-06T15:34:50.933 回答