Question

我创建了一个div，背景颜色设置为rgb（0,0,0）;我想用javascript点击它来改变它的颜色。我做了一个功能来做到这一点。

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

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

我可以获得div的值，但它会在“rgb（0,0,0）;”中得到它格式。得到这个后我不知道该怎么办。如何在rgb（0,0,0）中操纵整数; ？

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

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

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

Answer 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

JavaScript改变BG颜色

3 个答案: