分かりやすく、使いやすく。

色を反転させる方法

スポンサーリンク

Javascript(jQuery) で色を反転させるサンプルコードです。サンプルコードでは、色を反転させる関数（invertRgb）を作成しています。この関数は rgb(0, 0, 0) の形式で文字列を渡すと、反転した色を rgb(0, 0, 0) の形式の文字列で返します。

  1. ボタンをクリックしたら文字色と背景色を反転させる
  2. DIV をクリックしたら背景色を反転させる


ボタンをクリックしたら文字色と背景色を反転させる

サンプルコードは次の通りです。

html（サンプルコード）
1
2
3

<div id="target" style="color:#ff0000; background-color:#0000ff;">
ここの文字色と背景色を反転させます。
</div>
javascript（実行可能なサンプルコード）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<script>
$(function(){
    $("#my_button1").on("click", function(evt){
        //文字色を反転させる。
        old_color = $("#target").css('color');
        new_color = invertRgb(old_color);
        $("#target").css('color', new_color);
 
        //背景色を反転させる。
        old_color = $("#target").css('background-color');
        new_color = invertRgb(old_color);
        $("#target").css('background-color', new_color);
    });
});
 
function invertRgb(str_old_rgb) {
    var ary_rgb = str_old_rgb.match(/([0-9]+)/g);
    for (var i = 0; i < ary_rgb.length; i++) {
        ary_rgb[i] = 255 - ary_rgb[i];
    }
    return 'RGB(' + ary_rgb.join(',') + ')';
}
</script>  

実際の動作は以下で確認できます。

ここの文字色と背景色を反転させます。
▲このページの一番上に戻る

DIV をクリックしたら背景色を反転させる

サンプルコードは次の通りです。DIV の領域をクリックすると、その領域の背景色が反転します。

html（サンプルコード）
1
2
3
4
5

<div class="target" style="background-color:#ff0000;">DIV1</div>
<div class="target" style="background-color:#00ff00;">DIV2</div>
<div class="target" style="background-color:#0000ff;">DIV3</div>
<div class="target" style="background-color:#e6e6fa;">DIV4</div>
<div class="target" style="background-color:#48d1cc;">DIV5</div>
javascript（実行可能なサンプルコード）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<script>
$(function(){
    $(".target").on("click", function(evt){
        //背景色を反転させる。
        old_color = $(this).css('background-color');
        new_color = invertRgb(old_color);
        $(this).css('background-color', new_color);
    });
});
 
function invertRgb(str_old_rgb) {
    var ary_rgb = str_old_rgb.match(/([0-9]+)/g);
    for (var i = 0; i < ary_rgb.length; i++) {
        ary_rgb[i] = 255 - ary_rgb[i];
    }
    return 'RGB(' + ary_rgb.join(',') + ')';
}
</script>  

実際の動作は以下で確認できます。

DIV1
DIV2
DIV3
DIV4
DIV5
▲このページの一番上に戻る
スポンサーリンク
カテゴリー
スポンサーリンク