140 Colors Found

色のフォーマットの変換で手抜きをしてハマった話

色キーワードからrgb(R, G, B)か#RRGGBBに変換するために、その色キーワードを指定した要素の計算済みスタイルを拾おうとした。どんな色のフォーマットでも計算済みスタイルでは統一されている記憶があった(Operaは#RRGGBBで返ってきてしまうけど)ので利用したが、あえなく失敗。

document.body.style.backgroundColor = "Red";
var c = window.getComputedStyle(document.body, null).getPropertyValue("background-color");
// rgba(0, 0, 0, 0) or transparent

このコード自体にはあまり問題はない。rgba(0, 0, 0, 0)等が返ってきてしまう理由はbody要素のスタイルにtransitionプロパティがあったことで、色を変更した直後だとアニメーション中なため正確な値が拾えなかった。当たり前ですよねー。transitionプロパティがなければ意図した通りに変換される。

transitionが原因なので、そういった余計なスタイルが付かないダミーの要素を作ってそこから拾えばいいんじゃないかとやってみたら、今度は一部ブラウザで空文字列が返された。

var span = document.createElement("span");
span.style.backgroundColor = "Red";
var c = window.getComputedStyle(span, null).getPropertyValue("background-color");
// Chrome, Safari and Opera: empty string
// Internet Explorer and Firefox: rgb(255, 0, 0)

ChromeやSafari・OperaではappendChild()等をしていない要素の計算済みスタイルを参照できないようだ。パフォーマンス上の理由でこうなってるんだろうか。

色々ゴニョゴニョすれば変換できることはわかったのだけど、それだとコードが読みづらくなるので、データとして色キーワードとその色のrgb(R, G, B)を持たせることにしました……。最初からそうしていればよかったですね！