JavaScriptで、要素に適用されている色を取得する #JavaScript

まとめ

window.getComputedStyle(el).color で得られる。
戻り値は設定値を無視して "rbg()" ないし "rgba()" の書式になる。
IEは9+が対応。
IE 8までは el.currentStyle.color が近い、けどちょっと違う。
jQueryの .css('color') は getComputedStyle があればそっち、なければ currentStyle を使う

確認

http://jsfiddle.net/ginpei/LKFu9/show/

取得方法

HTML例

<div id="colored" style="color:red">COLORED</div>

getComputedStyle

DOM 2の仕様。IEは9から対応。

値は"rgb()"ないし"rgba()"になる。

var elColored = document.getElementById('colored');
var color = window.getComputedStyle(elColored, '').color;
console.log(color);  // => "rgb(255, 0, 0)"

"rgba()"はDOM 2じゃなさげ。

分解はこんな感じでどうでしょ。

var color = 'rgb(255, 0, 0)';
var colors = color.match(/\d+/g);
console.log(colors);  // => ["255", "0", "0"]

currentStyle

IEの独自規格。

値は設定値の書式を踏襲。ただし正規化はされるみたい。（例: "#FF0000" → "#ff0000", "rgb(1, 2, 999)" → "rgb(1,2,255)"）

var elColored = document.getElementById('colored');
var color = elColored.currentStyle.color;
console.log(color);  // => "red"

正規化について書いてあるの、見つからなかった。

jQuery

ご存知の。

値はgetComputedStyle()があればその値、なければcurrentStyleの値になる。（もちろん1系の場合ね。）

var $colored = $('#colored');
var color = $colored.css('color');
console.log(color);  // 環境に依る