Web 標準的な CSS の値変換方法（px → em など）（訂正あり）

はじめに

W3C の仕様に CSS の値を変換が可能なオブジェクトが定義されていることに気がついたのでメモしておきます。

まず CSSStyleDeclaration オブジェクトを取得する

例えば、

var decl = element.style;

または、

var decl = getComputedStyle(element, '');

http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration

CSSStyleDeclaration オブジェクトから getPropertyCSSValue という関数を使って CSSValue オブジェクトを取得する

var val = decl.getPropertyCSSValue('width')

http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSValue

以下のようにして様々な単位の値が取得できる

ただし、 CSSValue が CSSPrimitiveValue の場合だけ

if (!(val instanceof CSSPrimitiveValue)) throw Error();

// センチメートル単位で値を取得
var num = val.getFloatValue(CSSPrimitiveValue.CSS_CM);

http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSPrimitiveValue

対応ブラウザ

たぶん WebKit (Safari の開発版) だけだと思います。
WebKit++

追記

Firefox 3, Opera 9.5 でも対応しているようです。
ただ、いろいろためすと変換できない単位があったりします。
以下、参照

訂正

ちゃんと仕様のほうを確認してみました。
すると、以下のように記述されていました。

Conversions are allowed between absolute values (from millimeters to centimeters, from degrees to radians, and so on) but not between relative values. (For example, a pixel value cannot be converted to a centimeter value.)

http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSPrimitiveValue

絶対値間の変換は認められるが、相対値の変換は認められない。
ということは、どうやら WebKit の独自拡張ということなんですね。
WebKit--