1

background-color を 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); で整数のみを操作するにはどうすればよいですか? ?

4

3 に答える 3

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/

于 2013-05-04T12:56:54.627 に答える