1

我制作了一个背景颜色设置为 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) 中的整数；?

4

3 回答 3

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/

于 2013-05-04T12:56:54.627 回答
1

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

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;
}

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

于 2013-05-04T13:01:21.427 回答
1

或者您可以使用：

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

于 2013-05-04T13:04:22.773 回答