js で文字列が色かどうかを見分ける方法

こんにちはー。

js から css の backgroundColor や、color など、色を指定することがよくあります。
しかし、その時、色でない文字列が backgroundColor などに指定されると、
正しい結果になりません。

今回は、色である文字列が指定されているかを判別する方法を紹介します。

やりたいこと

次のサンプルを見てください。

See the Pen Jsで文字列が色かどうかを判別する by shundroid (@shundroid) on CodePen.

textbox に、blue や rgb(255,0,0)を指定して、「判別」ボタンを押すと、「色です」と結果が返ってきます。
しかし、hoge や、1 を指定すると、「色ではありません」となります。

では、この仕組みを説明します。

isColor 関数を実装する

サンプルでは、次のような関数が定義されています。

function isColor(color) {
  var testElement = document.createElement("span");
  testElement.style.backgroundColor = color;
  return testElement.style.backgroundColor !== "";
}

この関数に引数として文字列を指定すると、その文字列が色に変換できるかを返します。

仕組み

testElement.style.backgroundColor のデフォルトの値は "" です。
これに、色に変換できる文字列を指定すると、backgroundColor の値が変化します。
しかし、不正な値が指定されると、backgroundColor の値は変化しません。
これを利用して、testElement.style.backgroundColor !== "" で、
backgroundColorがデフォルトの値でないかで判別しています。