スタイルの取得

質問

特定の要素に対して特定の指定されているスタイルの値を取得したいです。(タグに直接指定されたもの、head内に記述されたもの、外部css)

これが簡単に利用できるスクリプト、もしくはライブラリみたいなのってありますか？
よろしくお願いします。

回答No.4

神崎 渉瑠（@taloo）

OperaでもcurrentStyleですね。

ポジション取りが目的ならスタイルシートではなくそれ用の取り方があります。私はoffsetTopなどを使ってますが。
ただしその要素、親要素ともにposition:absolute/relativeになっているとき、スタイルのtop/leftが0であっても、offsetTopなどが0とは限りません。
また、後方互換モードのIEでclientWidthとwidthの値が異なることもあります。

colorやbackground-colorが#FFFFFFとなっていたりrgb(255, 255, 255)となっていたりします。
'auto'が取れない理屈と同じかも知れません。
カラーパレットを作るときなど、色をどこかの要素に入れるだけならそのままで大丈夫ですが、
統一フォーマットのテキストで表示するには変換が必要になります。
これは計算でできるので良いんですが、margin-left、margin-rightなどautoが取れないものはお手上げですね。

お礼

marginもauto値が欲しいところなのでキツイです。
結局CSSの判定あたりからjavascriptで処理できるようにやるしかないですかね。
ありがとうございました。

回答No.3

steel_gray

適用されているスタイルを得ようと思えば getComputedStyle や currentStyle(IE)しかありません。

得られる値は内部用とも思える変換されたりした値になります。
（算出する都合上、仕方ないと思えますが）

ですので、実際に参照したいプロパティごとにどういうブラウザでどういう値が返ってくるかでごちゃごちゃと処理するしかないと思います。

もし、エレメントの位置や大きさを知りたいならスタイルを得るより専用のプロパティ(offsetX/YやclientX/Y)を見たほうが楽ですね。
http://msdn.microsoft.com/ja-jp/library/cc392317.aspx

お礼

回答ありがとうございます。
やはり、1つ1つやっていくしかないですか・・・

回答No.2

神崎 渉瑠（@taloo）

自分のライブラリで使っている関数ですが。

function GetStyle(el, prop){
if(!!el.style && el.style[prop]){
return el.style[prop];
}else if(el.currentStyle){
return el.currentStyle[prop];
}else if(document.defaultView && document.defaultView.getComputedStyle){
prop=prop.replace(/([A-Z])/g, "-$1");
prop=prop.toLowerCase();
return document.defaultView.getComputedStyle(el,null).getPropertyValue(prop);
}else{
return '';
}
};

使用
value=GetStyle(document.getElementById('hoge'), 'borderTopColor');
無指定のものは空文字列ではなく、デフォルトスタイルが返ります。

> それでgetComputedStyleというのを見つけたのですが、これだとautoという値を取得できないようなので(IEは違うみたいですが)、何かそのあたりに融通の効いたものが無いかと思い質問しました。
たしかにFirefox2.0とSafari3.1.2で、'em'や'auto'にならず、pxに変換されてしまいました。

getPropertyValueのところを以下のように変更して、直接取得を試みましたが、
getStringValue()、getFloatValue()の呼び出しで、
Firefoxはtry-catchでも捕捉できないシステムエラーが発生、
SafariではINVALID_ACCESS_ERRがスローされました。

}else if(document.defaultView && document.defaultView.getComputedStyle){
prop=prop.replace(/([A-Z])/g, "-$1");
prop=prop.toLowerCase();
var dv=document.defaultView.getComputedStyle(el,null);
var cv=dv.getPropertyCSSValue(prop);
alert(cv.cssValueType==cv.CSS_INHERIT); //検証用。継承されたプロパティならtrue
try{
//検証用のため最低限の区別のみ。
return (cv.primitiveType==cv.CSS_STRING)?cv.getStringValue():cv.getFloatValue();
}catch(e){
alert('error');
}
}

%やpt、cmとしてもpxに変換されるようです。
W3C提唱のDOMでは、そういう変換はNGだと思いますが
http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSPrimitiveValue
dv.getPropertyCSSValue(prop).primitiveType がCSS_PX、つまりpxで指定したことになっているようですし、
<div style="color:blue"><p></p></div>の<p>のcolorを調べても継承された色（CSS_INHERIT）ではなく、デフォルト値（？）（CSS_PRIMITIVE_VALUE）となっているようです。

> ただ、inheritで指定されたものに関してはそのまま返されるよりも、数字やautoの値になるほうが都合が良いです。
この検証用alertも付けてますが、実際の取得で分岐はしてません。
(cv.cssValueType==cv.CSS_INHERIT)がtrueにならないので、分岐できませんでした。

私の使い方が間違ってるのかもしれませんが、わかりませんでした。

私にはこれ以上どうしようもないですが、ご参考まで。

参考URL：

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

お礼

わざわざ検証までしていただいて、詳しい情報ありがとうございます。
autoの値が必要な部分だけ別の方法でできないか考えてみます。
getComputedStyleが画面上に表示されている状態の値を返してくるってことは、たしかにinheritのことは考えなくて良いってことになりますよね・・・
参考になります。

回答No.1

noname#84373

http://wiki.bit-hive.com/tomizoo/pg/Javascript%20cssRules

お礼

回答ありがとうございます。

要素に対してstyleで指定されたものや、外部CSSなど1つ1つからの取得だとできるのですが、例えば1つの要素に複数のクラスがついていて上書きされている場合も最終的に適用される値だけを取得したいと考えています。

それでgetComputedStyleというのを見つけたのですが、これだとautoという値を取得できないようなので(IEは違うみたいですが)、何かそのあたりに融通の効いたものが無いかと思い質問しました。

ただ、inheritで指定されたものに関してはそのまま返されるよりも、数字やautoの値になるほうが都合が良いです。

まだまだよくわからない部分もあるので、解釈が間違っている部分もあるかもしれませんが、よろしくお願いします。