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

Question

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

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

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

1. 如何读取 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() 例程中间的回调，似乎无法以相同的方式读取或操作“类”属性。

如能在 Javascript 中提供上述帮助，我们将不胜感激。

Answer 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 来明确测试谷歌浏览器)，这似乎确实是你需要。

引用资料:

• > window.getComputedStyle .