JavaScript更改BG颜色

我做了一个背景颜色设置为RGB（0,0,0）的股利;我想用javascript改变它的颜色。我做了一个功能来做到这一点。JavaScript更改BG颜色

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）中的整数; ？

来源

2013-05-04 akinuri

可以在data属性存储当前x值：

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-04 12:56:54 dfsq

你好，测试你的答案，不错的工作。只是会增加一个周期也是很好的。 http://jsfiddle.net/Wuz75/1/问候 – Stano 2013-05-04 13:32:12

正是我在找的。我也打算给它增加一个循环。所以谢谢你俩=） – akinuri 2013-05-05 21:19:37

而不是试图分析颜色，因为你的颜色是静态的，只需制作一组颜色，并跟踪索引。

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-04 13:01:21

颜色不会是静态的。这是没有必要的。我仍然无法运行你的代码。我是JavaScript新手。也许你可以链接一个演示。谢谢。 – akinuri 2013-05-05 21:29:35

@akinuri：http://jsfiddle.net/TBetW/如果颜色不是静态的，将使用什么样的计算？ – 2013-05-05 21:32:31

感谢您的演示。嗯，我还没有决定。我正在使用JavaScript来制作带有HTA的本地应用程序。现在就试试吧。 – akinuri 2013-05-06 16:40:30

或者你可以使用：

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-04 13:04:22 drinchev

感谢您的回复。这也适用。 – akinuri 2013-05-05 21:24:35

JavaScript更改BG颜色

回答

相关问题