![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
A 回答 (4件)
- 最新から表示
- 回答順に表示
No.4
- 回答日時:
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
- 回答日時:
適用されているスタイルを得ようと思えば getComputedStyle や currentStyle(IE)しかありません。
得られる値は内部用とも思える変換されたりした値になります。
(算出する都合上、仕方ないと思えますが)
ですので、実際に参照したいプロパティごとにどういうブラウザでどういう値が返ってくるかでごちゃごちゃと処理するしかないと思います。
もし、エレメントの位置や大きさを知りたいならスタイルを得るより専用のプロパティ(offsetX/YやclientX/Y)を見たほうが楽ですね。
http://msdn.microsoft.com/ja-jp/library/cc392317 …
No.2
- 回答日時:
自分のライブラリで使っている関数ですが。
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# …
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のことは考えなくて良いってことになりますよね・・・
参考になります。
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_12.png?e8efa67)
回答ありがとうございます。
要素に対してstyleで指定されたものや、外部CSSなど1つ1つからの取得だとできるのですが、例えば1つの要素に複数のクラスがついていて上書きされている場合も最終的に適用される値だけを取得したいと考えています。
それでgetComputedStyleというのを見つけたのですが、これだとautoという値を取得できないようなので(IEは違うみたいですが)、何かそのあたりに融通の効いたものが無いかと思い質問しました。
ただ、inheritで指定されたものに関してはそのまま返されるよりも、数字やautoの値になるほうが都合が良いです。
まだまだよくわからない部分もあるので、解釈が間違っている部分もあるかもしれませんが、よろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript Google reCAPTCHAについて 1 2023/02/22 14:37
- 就職 タイピング技能検定の特級って履歴書に書いたほうがいい資格ですか? 1 2023/04/06 21:00
- HTML・CSS CSS上での計算を行うためのルールについて教えてください。 3 2022/08/15 14:43
- 運転免許・教習所 大型二種免許について。 3 2022/06/14 12:32
- 運転免許・教習所 大型二種免許について。 5 2022/08/04 22:29
- 運転免許・教習所 大型二種免許について。 5 2022/07/13 19:49
- 消費者問題・詐欺 NHK.OKWAVEどっちが嘘をついている? 9 2022/04/20 20:07
- 簿記検定・漢字検定・秘書検定 4月から商業高校の会計科に通う予定の中学生です。現在春休みで、簿記検定3級を取得しようと考えており、 1 2023/03/04 14:40
- 運転免許・教習所 大型二種免許について。 4 2023/02/05 22:09
- 運転免許・教習所 大型二種免許について。 2 2023/06/08 20:48
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
FireFoxのjavascriptで自動でキ...
-
クリッカブルマップのリンク部...
-
DOM要素を削除しても、イベント...
-
TexでΣの添え字の位置直し
-
VBAでIEのボタンを押してメッセ...
-
javascriptのdocument.allにつ...
-
このソースのif文をswitch文に...
-
removeEventListenerの必要性
-
プルダウンメニューの項目をク...
-
C#OpenCv V4にのエラーに関する...
-
関数でy=g(x)のgとは何の略です...
-
JavaScriptとHTMLの課題です
-
<a>タグのテキストを取得
-
JAVAスクリプトで指定時間以降...
-
同じIDで定義した要素の配列を...
-
GASでundefinedエラーが出ます
-
【正規表現】【javascript】CR...
-
window.openでタイトル名の指定
-
ドラッグでセルを選択した後に
-
undefinedを表示させない方法は...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
FireFoxのjavascriptで自動でキ...
-
Latexに関する質問です。
-
DOM要素を削除しても、イベント...
-
XMLでのAttributeを持ったNode...
-
TexでΣの添え字の位置直し
-
JavaScript window.openで開く...
-
Null またはオブジェクトではあ...
-
javascriptの基本的なことだと...
-
iframeのソースを取得したい
-
選択肢によってラジオボタンを...
-
excle VBA とweb上の検索を利用...
-
文字を一文字ずつ表示
-
ラジオボタンでreadonlyの切替え
-
responseTextについて
-
VBAのIE操作でframe構造のサイ...
-
サブウィンドウからのスタイル...
-
JavaScriptのdocument.all("変...
-
オンマウスについて
-
要素のリサイズをひろい、他の...
-
クリッカブルマップのリンク部...
おすすめ情報