如何使用 HTML5 和 CSS 更改按钮背景颜色 3 次答案

【问题标题】：How to change button background color 3 times with HTML5 & CSS如何使用 HTML5 和 CSS 更改按钮背景颜色 3 次
【发布时间】：2013-06-26 20:15:51
【问题描述】：

我正在创建一个内部用户可以单独单击的按钮表。我需要这些按钮才能将背景从白色切换到绿色再到红色，然后再切换回白色......用户是内部用户，我可以指定这只适用于 Chrome。我想坚持使用基本的 HTML5/CSS3 和 Javascript，因为它更具程序性，而且我的团队（我们不是网页开发人员）更有可能维护它。

按钮元素的工作方式似乎与文本或其他元素不同。我已经使用代码来更改其他背景颜色，但是当元素是按钮时它不起作用。

我的 2 个基本阻塞问题是：

如何在 onClick() 中读取当前背景颜色例程以便我的代码可以计算下一个颜色？

如何更改 Button 元素的样式或类，以便在您退出 onClick() 例程期间或退出时背景颜色会发生变化吗？

我见过在 CSS 文件中定义 3 种不同颜色样式的示例，如下所示：

.make-background-white { background-color: white}
.make-background-green { background-color: green}
.make-background-red   { background-color: red}

当我最初绘制按钮时，我可以使用这些。但我不知道如何在 onClick() 例程中“读取”当前背景颜色，也无法更改颜色。

更多详情

我从数据库中读取，以查找按距离排序的商店周围的所有邮政编码。我创建了一个以邮政编码作为文本的按钮表，范围为 40-600 个按钮。背景颜色显示未分配的邮政编码（白色背景）和已分配的邮政编码（绿色背景）。

有时用户想要点击几个白色邮政编码来表示他们想要将该代码分配给商店。

我还想要一些帮助按钮，用户可以单击这些按钮自动为半径为 30 或 60 或 90 英里的商店着色/分配邮政编码。

我在后台有一个大型 Javascript 哈希/关联数组，它使用邮政编码作为键，用于创建按钮、跟踪距离、跟踪分配或未分配的邮政编码等。这很简单。让我失望的是动态变化的按钮背景。

经过三天的黑客攻击后，我确实设法通过使用带有如下回调的 Jquery 来完成某些工作：

$(".btn").click(function() {
    if ( $(this).hasClass ('make-background-white') {
        $(this).removeClass('make-background-white');
        $(this).addClass ('make-background-green');
    } else if ( $(this).hasClass('make-background-green') {
         // Remove green, add red
    } else if () {
        // Remove red, add white
    }

}

这似乎会触发按钮使用新背景重新绘制，并通过在“类”属性中存储一个字符串来工作，以便以后读取和操作。这是我在其他更直接的 Javascript 中的回调，其他使用“getElementById()”的 onClick() 例程似乎无法以相同的方式读取或操作“class”属性。

如果在 Javascript 中执行上述操作，我们将不胜感激。

【问题讨论】：

你能详细说明一下问题到底是什么吗？您编写的代码会改变按钮的颜色。我整理了一个小演示，展示了您编写的内容并通过单击另一个按钮来更改按钮的颜色。 jsfiddle.net/CWjWY/1 顺便说一句，您的代码在 if 语句的末尾缺少 )。

标签： javascript html css

【解决方案1】：

如果您的目标是在纯 JavaScript 中实现背景颜色循环按钮（在这种情况下不依赖类名），那么下面是一种可能的方法，尽管它可能过于复杂：

function inArray(needle, haystack) {
    if (!needle || !haystack) {
        return false;
    }
    else {
        var notFound = -1;
        for (var i = 0, len = haystack.length; i < len; i++) {
            if (haystack[i] == needle) {
                return i;
            }
        }
        return notFound;
    }
}

function colorToggle(el, colors) {
    if (!el) {
        return false;
    }
    else {
        var colors = colors || [
            'rgb(255, 0, 0)',
            'rgb(0, 255, 0)',
            'rgb(0, 0, 255)'],
            wGCS = window.getComputedStyle,
            curColor = wGCS(el, null).backgroundColor;
        var pos = inArray(curColor, colors);
        if (pos > -1 && pos < (colors.length - 1)) {
            el.style.backgroundColor = colors[inArray(curColor, colors) + 1];
        }
        else if (pos > -1 && pos == (colors.length - 1)) {
            el.style.backgroundColor = colors[0];
        }
    }
}

var buttons = document.querySelectorAll('button.colorToggle');

for (var i = 0, len = buttons.length; i < len; i++) {
    buttons[i].style.backgroundColor = 'rgb(255, 255, 255)';
    buttons[i].onclick = function() {
        colorToggle(this, ['rgb(255, 255, 255)','rgb(0, 255, 0)','rgb(255, 0, 0)']);
    };
}

JS Fiddle demo.

因为您保证这只需要在 Chrome 中运行，所以我只在 Chromium 18 中测试过（因为我没有 Windows 或 Mac 来明确测试 Google Chrome），这似乎确实是你需要。

参考资料：

window.getComputedStyle。

【讨论】：

非常好的例子。谢谢你。我将采纳你的一些想法（比如检查“el”是否不为空）。
很高兴得到（一些）帮助！ =)

【解决方案2】：

您真的需要在更改 CSS 属性之前获取它吗？没有此先决条件的示例：

<html>
<head>
<script type="text/javascript">
var bg_colors = ['red', 'blue', 'green']

function change_bg_color()
{
  bg_color = bg_colors.shift();
  bg_colors.push(bg_color);
  document.getElementById("demo").style.backgroundColor=bg_color;
}
</script>
</head>
<body>

<h1>My First Web Page</h1>
<p id="demo">This is a paragraph.</p>

<button type="button" onclick="change_bg_color()">change background-color</button>

</body>
</html>

【讨论】：

我认为（超过 3 天的黑客攻击）设置 ".style.bacgroundColor=" 不适用于按钮。但我可能一直在尝试做“button.backgroundColor”而不是“button.style.backgroundColor”。谢谢你的建议。

【解决方案3】：

如果每个按钮一次只需要一个类名，则可以在单击时读取/写入类名。

$(".btn").click(function() {
   var c=this.className;
   if(c=='make-background-white' || c=='')this.className='make-background-red';
   else if(c=='make-background-red')this.className='make-background-green';
   else this.className='make-background-white';
}

这假设您从白色背景开始，或者是因为所有按钮都以这种方式开始（按钮，.make-background-white{background-color:white;color:black}），或者您设置了它们的类属性。

【讨论】：

看起来上面会在第一次点击时删除类名开头的“btn”。如果我在作业中设置了类似的字符串：“btn make-background-green”——那么后面的点击就会起作用。但它仍在使用 Jquery 回调，它破坏了创建我自己的“onClick=myFunction()”的能力。如果我使用 jQuery 重新编写所有内容就可以了。（但我昨天才开始使用 jQuery）。

【解决方案4】：

成功。我终于找到了如何使用 Javascript 访问 className 属性。

不知何故 - 设置 className 似乎会触发按钮的重新绘制。

下面是我用 onClick="zipClick('this_button', 'this_textarea')" 调用的函数

感谢您的所有精彩回复。

    // This function does 2 things:
    //    Changes the background color of the button
    //    Calls a REST service
    function zipClick (aButtonId, aTextAreaId) {

        var lButton = document.getElementById(aButtonId);
        var lClassName = lButton.className;

        // lClassName should be something like: "btn make-background-yellow"
        //alert ("Button Class Start = " + lClassName);

        if ( lClassName.indexOf('green') > -1 ) {
            lButton.className = 'btn make-background-yellow';
        } else if ( lClassName.indexOf('white') > -1) {
            lButton.className = 'btn make-background-green';
        } else if ( lClassName.indexOf('yellow') > -1 ) {
            lButton.className = 'btn make-background-white';
        } else {
            // Should never get here but fix the class name for the next click
            lButton.className = 'btn make-background-white';
        }

        alert ("old class: " + lClassName + "\nnew class: " + lButton.className);

    }   // zipClick

【讨论】：

【解决方案5】：

你可以通过 jquery setTimeOut 函数来实现。通过保持颜色的隐藏值你可以切换样式

<script>
setTimeout(function() {   
//code to change style to button
}, 10000);
</script>

【讨论】：