JavaScript＆jQueryで背景色をランダムに変更する「randomColor.js」

背景色をランダムで変更できる JS コードを書きました。

ネイティブな JavaScript の DOM でも、jQuery オブジェクトでも動くように調整したので、どちらでも使える便利な関数です。

randomColorJs

function

JavaScript

function randomColor(node, colorBoolean) {
    if (node[0]) {
        if (!node[0].nodeName) return
    } else {
        if (!node.nodeName) return
    }
    if (node.style) {
        var dom = [node];
        length = 1;
    } else {
        if (!node[0].style) {
            return
        }
        var dom = node;
        length = node.length;
    }
    for (var i = 0; i < length; i++) {
        var colorR = ~~(256 * Math.random());
        var colorG = ~~(256 * Math.random());
        var colorB = ~~(256 * Math.random());
        dom[i].style.backgroundColor = "rgb(" + colorR + "," + colorG + "," + colorB + ")";
        if (colorBoolean) {
            if (colorR + colorG + colorB > 382.5) {
                var fontColor = "#333";
            } else {
                var fontColor = "#fff";
            }
            dom[i].style.color = fontColor;
        }
    }
}

使い方

//ID で
randomColor(document.getElementById("main"));

//ClassName で
randomColor(document.getElementsByClassName("menu-list"));

//TagName で
randomColor(document.getElementsByTagName("span"));

//querySelectorAll で
randomColor(document.querySelectorAll("#main, .menu-list li, .content span"));

//jQuery で
randomColor($(".content"));

randomColor() の中に DOM もしくは jQuery オブジェクトを入れると背景色をランダムに変更します。

getElementById でも querySelectorAll でも $ でも要素を指定するものであれば関数が動きます。HTMLCollection や NodeList で複数の要素を指定するものは、その全てにランダムで異なる背景色を指定します。

第2引数

第2引数は真偽値を設定することにより「文字色」を調整することが可能です。

背景色の濃淡を簡単に判断して、濃い背景色ならば「白文字」、薄い背景色ならば「黒文字」と自動で変更します。簡単な判断になるので、いまいちな感じになることもあります（泣）

第2引数の初期値は「false」です。引数を省略した場合や false を指定した場合、文字色の自動調整は行いません。

//文字色自動調整
randomColor($(".content"), true);

「true」を入れることで自動調整が働きます。

デモ

簡単ですがデモです。下記のボックスをクリックすると背景色がランダムで変更されて、文字色の自動調整が働きます。

random
Color.js

追記：コード一部修正しました