Question

我正在创建一个内部用户可以单独点击的按钮表。我需要按钮才能将背景从白色切换为绿色再切换为红色然后再切换回白色....用户是内置的，我可以指定这仅适用于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（）例程中“读取”当前的背景颜色，也不能改变颜色。

更多详情

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

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

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

我在后台有一个大的Javascript Hash / associative数组，它使用zip-code作为键，用于创建按钮，跟踪距离，跟踪分配或取消分配的邮政编码等。这很简单。它动态地改变了让我失望的按钮背景。

我经过三天的黑客攻击后通过使用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才能明确测试Google Chrome），这似乎确实如此你需要。

参考文献：

window.getComputedStyle。

Answer 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>

Answer 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}），或者您设置了它们的类属性。 / p>

Answer 4

SUCCESS。我终于找到了如何使用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

Answer 5

您可以通过jquery setTimeOut函数实现此目的。通过维护颜色的隐藏值，您可以切换样式

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

如何使用HTML5和＆amp ;;更改按钮背景颜色3次CSS

5 个答案: