JavaScript 改变 BG 颜色

Question

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

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/