单击按钮时更改按钮的背景颜色[重复]

Posted 2023-02-21

【中文标题】单击按钮时更改按钮的背景颜色[重复]

【英文标题】：Changing a button's background color when it's clicked [duplicate]

【发布时间】：2013-06-02 16:44:17

【问题描述】：

我正在尝试使用 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 是我正在使用的另一个函数，它工作得非常好。 我似乎无法弄清楚为什么它不起作用。

【问题讨论】：

背景减色？你甚至在减法运算符周围有空格！

你调用的是函数btnColor，但是你的函数叫做setColor

【参考方案1】：

为什么不直接使用 jQuery？

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

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

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

问候

【讨论】：

如果他们只是改变一个按钮背景，没有必要为一个事件加载一个 32kb 的文件。

@Seth 没有人在项目中只编写一个函数。Jquery 是一种扩展，性能要好得多。是的，我同意为一个事件加载文件是矫枉过正的。

【参考方案2】：

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

我将函数重命名为 setColor 我通过 window.getComputedStyle(property).backgroundColor 更改了属性 property.style.background-color

【讨论】：

它可以工作，但不会切换回您在 html 函数调用中传递的颜色，即“#fff200”。

传递一个 rgb 值。十六进制似乎转换不正确。或者制作你自己的正常工作的 rgbToHex 函数，并将其作为颜色传递。

它似乎也不适用于 rgb 值。我尝试发出警报，但由于某种原因，它每次都会跳过 if 语句并跳转到 else 部分。

有一个工作版本：jsbin.com/ebubop/7/edit我更新了我原来的帖子

【参考方案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（注意，变量名称区分大小写，参见 Color => color）：

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

【参考方案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 变为 -> backgroundColor

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

【讨论】：

用 ['backgroundColor'] 和 ['background-color'] 试过这个。没用！

background-color 无论如何都不起作用。您确定在输入字段中正确命名了函数调用吗？我看到您之前对其进行了编辑，因为名称与函数声明冲突。 document.getElementById(element).style.backgroundColor = color 是您设置背景颜色、替换元素和颜色或传入变量的方式。仔细检查 function btnColor 和 onclick="toggleLayer('transparent1');btnColor(this, '#fff200');" 是否使用相同的函数名称。

确保函数调用相同，并且使用了 backgroundColor。仍然不起作用。