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顏色

回答

相關問題