外部スタイルシートで定義した情報を参照したい

[新着] Webテンプレートを仮オープンしました

0   名前： MOA ： 2006/07/20（木） 19:25  ID:Ip1N2Vuc
初めて質問させて頂きます。

外部スタイルシートで定義した情報（top や left などの値）をJavaScriptで参照したいのですが、
例えば、外部スタイルシートで

#contents{
border-width: 3px;
}

と定義しておき、

document.getElementById('contents').style.borderWidth

としても空文字が返ってしまいます。
スタイルシートをHtml内に記述すれば問題ないのですが、それはできれば避けたいです。

どなたか、解法をご存知の方がいらっしゃいましたらご教授の程お願い致します。
1   名前： Pid ： 2006/07/20（木） 19:25  ID:MDvGLGRF
element.style はインラインスタイル，つまり HTML で言うところの style 属性を表現します[*]。style 属性がなければ空なのは当然です。

var element = document.getElementById ('contents');

// DOM Level 2: View, CSS
var cs = document.defaultView.getComputedStyle (element, null);
alert ( cs.getPropertyValue ('border-width') );

// MSIE
alert ( element.currentStyle.borderWidth );


ただし，これは内部計算値なので，「書いたまま」の値が取得できるとは限りません。

// DOM Level 2: View, CSS

// 第 1 スタイルシートの第 1 宣言ブロック
var ssb = document.styleSheets[0].cssRules[0];

// 第 1 宣言ブロックの CSS 全文
alert ( ssb.cssText );

// 第 1 宣言ブロックの最初のセレクタ＋プロパティ集合（たとえば 'body { color: #000; background-color: #fff; }' ）
alert ( ssb.cssRules[0].cssText );


ならば，ある程度まで書いたままの形で取得できるでしょう（切り分けは大変ですが）。
http://www2u.biglobe.ne.jp/%7Eoz-07ams/prog/dom-ref/object-index.html#CSS
http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_stylesheet.asp


----

[*] ややこしい話をしますと，DOM Level 2 CSS 実装において，Element 型は ElementCSSInlineStyle 型にキャストされます。ゆえに，Element は style プロパティ（CSSStyleDeclaration 型）を持つことになります。

element.style.getPropertyValue ('border-width');


ここで，もし実装が CSS2 拡張モジュールをサポート（hasFeature ('CSS2', '2.0')）していれば，CSS2Properties インタフェースを使用できるので，上記を

element.style.borderWidth;


のように書くことができるわけです。
2   名前： Pid ： 2006/07/20（木） 19:25  ID:igmZdEV6
>>1
訂正。

> ただし，これは内部計算値なので，「書いたまま」の値が取得できるとは限りません。

仕様上，getPropertyValue は「書いたまま」の値を期待すべきなのかな…？

少なくとも，Mozilla/Firefox は getPropertyCSSValue で取得されるべき(?)表現で返ります（たとえば，#000 → rgb(0, 0, 0)）。この件についてご存知の方はぜひ教えて下さい。

> // DOM Level 2: View, CSS

二番目（document.sytleSheets を使っている方）は DOM2 View ではなく DOM2 Stylesheets でした。
3   名前： Chip ： 2006/07/20（木） 19:25  ID:iXTrKUp6
>1
'border-width'はちょっと厄介。

getPropertyValueでは簡略記述では受け付けず、
'border-top-width'　みたいに細かいプロパティ名で指定しないとダメみたい。（Firefox1.5で確認）

IEのcurrentStyleでは'borderWidth'でも大丈夫。
ただし、4辺の値の状態によって返される値（形式）も変わる様子。
4辺全て同じなら '1px'
TOPだけ違うなら '0px 1px 1px'　とか。

具体的な利用方法・実態に沿って注意して参照するしかないのかな？
4   名前： Pid ： 2006/07/20（木） 19:25  ID:cjMhC6Ed
あーそうでした，border-width は簡略プロパティでした。

border-width の場合，「可能な辺の最少数が使われるべきである」とあるので，むしろ（ご指摘のような）IE の currentStyle.borderWidth のような動作が望ましいのでしょう。すると，Firefox の動作は不具合と呼んで良いのかな……。
http://www2u.biglobe.ne.jp/%7Eoz-07ams/prog/dom-ref/CSS/CSS2Properties.html

Stylesheet Object Model は，いまいち理解しきれんです orz。
http://www.w3.org/TR/DOM-Requirements/#dom-level-2-requirements
5   名前： MOA ： 2006/07/20（木） 19:25  ID:Ip1N2Vuc
詳細な回答ありがとうございます！

しかしなるほど･･･DOM は奥が深いですね。完全に勉強不足でした。
折角ですし、貼っていただいたURLを元手に知識を深めたいと思います。
6   名前： Pid ： 2006/07/20（木） 19:25  ID:/cYYuQrv
完全に私の興味だけでスレを上げてしまいますが (^^;)，

CSS2Properties インタフェースにより，CSSStyleDeclaration 型の style で

・element.style.borderWidth

と書けるならば，同じ CSSStyleDeclaration 型のオブジェクトで

・document.defaultView.getComputedStyle (element, null).borderWidth

のように書いていけない理由はないはず……と思ったら，Mozilla 1.7，Opera 9.0 では OK でした。まあ，結果は getPropertyValue と同じですが orz。

なお，Opera 9.0 は border-width/borderWidth を取得できます（もっとも，font プロパティは，仕様で「こうしてはいけない」と明記された形で出力しています）。実装ごとの出力形式の一覧を作成すべきですねこりゃ（他力本願）。
7   名前： Pid ： 2006/07/20（木） 19:25  ID:TDh0RvEz
getPropertyValue で取得できる形式についての覚え書き。

Mozilla 1.7，1.8; Firefox 1.0，1.5（DOM Inspector の Computed Style 欄を参照）
・長さ，パーセント値は px 単位に（初期値がキーワードで指定なしの場合はキーワードで）
・URI は url(引用符なし絶対 URI)
・色は rgb(255, 255, 255)
・簡略プロパティは取得できない

Safari 2.0
・単位変換は Gecko とほぼ同じ
・簡略プロパティは取得できない
・ただし，background-color は rgba(255, 255, 255, 255)（透明度指定？）
・cssPrimitiveValue.cssText を持たない

Opera 9.00
・長さ，パーセント値は px 単位に。
・URI は url(二重引用符つき絶対 URI)
・色は #ffffff
・margin, padding, border 簡略プロパティは，最小形式にまとめられる。
・background 簡略プロパティには必ず background-position の値が入る。
・font 簡略プロパティには必ず font-style, font-variant, font-weight, font-size, line-height, font-family が入る。
・font-weight は数値に置換される。
・getPropertyCSSValue を持たない。

とり急ぎ，確認した分だけ。
一覧へ戻る