JavaScript 改变背景颜色答案

【问题标题】：JavaScript Changing BG ColorJavaScript 改变背景颜色
【发布时间】：2013-04-28 18:37:00
【问题描述】：

我制作了一个背景颜色设置为 rgb(0,0,0); 的 div我想用javascript点击改变它的颜色。我做了一个函数来做到这一点。

function change(){
var x = 1;
var y = x + 100;
document.getElementById("box").style.backgroundColor = "rgb(" + y + "," + y + "," + y + ")"; }

它工作正常，但我只能更改 div 的颜色一次。我想要做的是获取 div 的颜色值并将其设置为 x 并再次运行该函数。所以每次点击时背景会变成黑色->灰色->白色。取决于 y 变量。

我可以得到 div 的值，但它会在 "rgb(0,0,0);" 中得到它格式。我不知道得到这个后该怎么办。如何仅操作 rgb(0,0,0) 中的整数； ?

【问题讨论】：

标签： javascript css html colors background

【解决方案1】：

您可以将当前的x 值存储在data 属性中：

function change(box) {
    var x = +box.getAttribute('data-x'), // +box.dataset.x for modern browsers
        y = x + 100;
    box.style.backgroundColor = "rgb(" + y + "," + y + "," + y + ")";
    box.setAttribute('data-x', y);
}

HTML

<div id="box" onclick="change(this)"></div>

演示：http://jsfiddle.net/Wuz75/

【讨论】：

你好，测试了你的答案，干得好。也可以为它添加一个循环。 jsfiddle.net/Wuz75/1问候
正是我想要的。我还打算给它添加一个循环。所以谢谢你们=)

【解决方案2】：

不要尝试分析颜色，因为您的颜色将是静态的，只需创建一个颜色数组，并跟踪索引。

var colors = [
        "rgb(0,0,0)",
        "rgb(100,100,100)",
        "rgb(255,255,255)"
    ],
    c = 0;

然后在您的函数中，使用c 获取下一个颜色，然后递增，或重置为0。

function change() {
    document.getElementById("box").style.backgroundColor = colors[c];
    c = ++c % colors.length;
}

因此，无论何时运行该函数，它都会在 Array 中的颜色之间切换。

【讨论】：

颜色不会是静态的。没有必要。我仍然无法运行您的代码。我是 JavaScript 新手。也许你可以链接一个演示。谢谢。
@akinuri:jsfiddle.net/TBetW如果颜色不是静态的，将使用什么样的计算？
感谢演示。嗯，我还没有决定。我正在使用 JavaScript 使用 HTA 制作本地应用程序。现在只是试验。
@akinuri：不客气。只是为了好玩，我做了一个生成随机颜色的快速演示：jsfiddle.net/TBetW/1
哈哈。谢谢你。这肯定会派上用场=)

【解决方案3】：

或者你可以使用：

function change(x) {
  var el = document.getElementById('color');
  var rgb = el.style.backgroundColor.replace(/rgb|\(|\)|\s/g, '').split(',');

  if ( rgb == "" ) { rgb = [0,0,0] };

  for (var a = 0; a < rgb.length; a++ ) {
    rgb[a] = parseInt(rgb[a]) + x;
  }

  el.style.backgroundColor = 'rgb('+rgb.join(',')+')';
}

这是一个演示：http://jsbin.com/ozepaz/1/edit

【讨论】：