JavaScript Изменение цвета BG

Question

Я сделал div с фоном цвета, установленным в rgb (0,0,0); и я хочу изменить его цвет при щелчке с помощью javascript. Я сделал функцию, чтобы сделать это.

Это прекрасно работает, но я могу изменить цвет div только один раз. То, что я хочу сделать, это получить значение цвета div и установить его на x и снова запустить функцию. Таким образом, bg будет выглядеть как black-> grey-> white на каждом клике. В зависимости от переменной 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