各ブラウザが返す色名(文字列フォーマット)の違いを吸収する
CSSセレクタで style を絞り込めるように機能を拡張している最中なんですが、document.defaultView.getComputedStyle(element).color ってブラウザ毎にフォーマットが違うので、まずはそれをあわせこむ部分の実装からやってます。
# IE だと currentStyle.color ね
# see http://d.hatena.ne.jp/uupaa/20080928/1222543331
すでに、uupaa-color.js というゴテゴテした実装もあるのですが、もうちょっと軽いやつが欲しかったので、ささっと書いてみました。
uu.mix(uu.style, // uu.style.colorNumber - 色文字列を数値に変換する colorNumber: function(value) { var match; if (!value) { return 0; } if ( (match = value.match(/^(?:#([\da-f]{6})|#([\da-f])([\da-f])([\da-f])|rgba?\(([\d\.]+)(%)?,\s*([\d\.]+)(%)?,\s*([\d\.]+)(%)?)/i)) ) { // ) if (match[1]) { return parseInt(match[1], 16) } if (match[2]) { return parseInt([match[2], match[2], match[3], match[3], match[4], match[4]].join(""), 16); } return (match[6] ? ((match[5] - 0) * 255 / 100) | 0 : match[5] - 0) * 65536 + (match[8] ? ((match[7] - 0) * 255 / 100) | 0 : match[7] - 0) * 256 + (match[10] ? ((match[9] - 0) * 255 / 100) | 0 : match[9] - 0); } return UU.COLOR.NUMBER[value] || 0; } });
UU.COLOR.NUMBER は 名前で色値が引ける Hash です。
UU.COLOR.NUMBER = { transparent: 0, black: 0, : : };
こんな感じに使います。
uu.style.colorNumber("rgb(100%, 43.5%, 255)"); // 16740095 uu.style.colorNumber("#C0FFEE"); // 12648430