まとめ
-
window.getComputedStyle(el).colorで得られる。 - 戻り値は設定値を無視して
"rbg()"ないし"rgba()"の書式になる。 - IEは9+が対応。
- IE 8までは
el.currentStyle.colorが近い、けどちょっと違う。 - jQueryの
.css('color')はgetComputedStyleがあればそっち、なければcurrentStyleを使う
確認
取得方法
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); // 環境に依る