2008年2月16日土曜日

 

【Javascript】CSSの値を取得する

DOM:window.getComputedStyle

var element = document.getElementById(“elemId”);
var style = document.defaultView.getComputedStyle(element, pseudoElt);
概要
要素の算出スタイルを返します。算出スタイルは、要素に対して適用される全ての CSS プロパティにおいて最終的に算出された値です。 pseudoElt は、マッチさせたい疑似要素を指定する文字列です。通常要素には空文字列を指定してください。
詳細
返るオブジェクトは、要素の style プロパティから返るオブジェクトと同じ型ですが、2 つのオブジェクトの用途は異なります。getComputedStyle から返るオブジェクトは、読み込み専用であり、要素のスタイルを調べるために使われます。elt.style オブジェクトは、指定する要素のスタイルを設定するために使われます。
getComputedStyle について調べてたら深みにハマったのでメモ
IE では
そもそも getComputedStyle という関数自体が存在しない
その代わり、 IE ではすべての HTMLElement が currentStyle というプロパティを持っていて、これが getComputedStyle で取得できるオブジェクトとほぼ同じ役割をする。
ということで、さっきの例は以下のようにすると IE にも対応できる。

var style = element.currentStyle || document.defaultView.getComputedStyle(element, '') 
という訳で↑これを使えば、クロスブラウザで、しかもワンライナーで getComputedStyle が使える!!テラ便利!!
サイズ値を"auto"とした場合の値の取得
Opera、Safari は正しく算出値を返す。ところが Gecko は、明示的にスタイル指定されていないものに関しては初期値を返してしまう。さらに、IE は DOM2-CSS をサポートしておらず、

var specifiedWidth = element.currentStyle.width;
としなければならないのだが、ここで返されるのは計算値ですらなく指定値だ。
そこで、非標準だが以下のプロパティを用いることが多い。なお、これらは全て CSS の width(内容ボックスの幅)とは異なることに注意。
element.offsetWidth
ボーダーボックスの幅[*2](px)。
element.clientWidth
パディングボックスの幅[*1]からスクロールバー等の幅を引いた値(px)。
element.scrollWidth
(padding-left) + (子ボックスのマージンボックス[*3] の幅の総和からマージン相殺分を引いた px 値) + (padding-right) [*1] (padding-left) + (width) + (padding-right)
[*2] (border-left-width) + (padding-left) + (width) + (padding-right) + (border-right-width)
[*3] (margin-left) + (border-left-width) + (padding-left) + (width) + (padding-right) + (border-right-width) + (margin-right) もともとこれらは IE の独自拡張で、他ブラウザのサポートもまちまちだ(かつ、ご存知のように、IE の後方互換モードでは、CSS の width をボーダーボックス幅と見なすバグがあるので、状況は複雑だ)。だが、一応は標準化作業が進められているので、そのうち問題なく使えるようになるだろう。

個人的解釈
CSSファイルなど外部からのスタイル読み込み等、実際にブラウザ表示されるページのスタイル値は下ので得られますよーってこと。ブラウザごとの算出値。 currentStyle はIE用、defaultView はSafari・Opera用。 Firefox は document.getComputedStyle でも大丈夫。 でもgetComputedStyleは読み取り専用なので、スタイルを指定するには、element.style にしましょうねーって感じ。


var style = element.currentStyle || document.defaultView.getComputedStyle(element, '') 

IE はサイズ指定がされてないものは auto値のまま計算してくれない。
auto値が知りたければ(動的な要素に高さを揃えたりとか)、下みたいな事かな。
ちなみに、Firefox には「px」とか単位つけないとダメ。


var style = element.offsetWidth || document.defaultView.getComputedStyle(element, '') .with
element.style.width = style + 'px';

結論
IE めんどい。

関連
JavaScriptでCSSスタイルを取り扱うライブラリ。
style.js - CSSスタイルを取り扱うライブラリ
上記リンクのgetComputedStyle について調べてたら深みにハマったのでメモを参考にバージョンアップ。

ラベル:


コメント: コメントを投稿

登録 コメントの投稿 [Atom]



この投稿へのリンク:

リンクを作成



<< ホーム

This page is powered by Blogger. Isn't yours?

登録 投稿 [Atom]

Google