- ベストアンサー
Stylesheetの情報を取得したい
下記のような内容でaタグの背景を置き換えてボタンを作りました。 このときのボタンのURLを変数として取得したいのですが、 style.backgroundImage を alert() で表示させても空欄のままに なってしまいます。 いろいろ試してみましたがうまい方法がみつかりませんでした。 どなたか分かりませんでしょうか。 <html> <head> <style type="text/css"> <!-- a.test { display: block; width: 100px; height: 20px; background-image: url(button_0.gif); background-repeat: no-repeat; } a.test:hover { background-image: url(button_1.gif); } --> </style> </head> <body> <a href="#" class="test"></a> <script type="text/javascript" language="javascript" charset="shift_jis"> <!-- alert(document.getElementsByTagName('A')[0].style.backgroundImage); --> </script> </body> </html>
- mimesis
- お礼率60% (6/10)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
style プロパティは ElementCSSInlineStyle（要素に付属するインライン・スタイル情報）に属します。HTML なら style 属性で書かないと値を取得できません。 ページ内の算出スタイルを取得する場合は ViewCSS に属する getComputedStyle を用います。 var node = document.getElementsByTagName('a')[0]; alert( getComputedStyle(node, null).getPropertyValue('background-image') ); ただし MSIE だけは独自の currentStyle プロパティを用いねばなりません。
その他の回答 (1)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
ＭＳのサイトの説明によると、 inlineのスタイル（<a style="backgroundImage:url(button_0.gif)"…の様に指定した場合）と スクリプトで指定した（object.style.backgroundImage='url(button_0.gif)';）場合以外の場合 つまり、styleシートでの指定や、上位エレメントのスタイルの引継ぎによる場合 現エレメントのstyleは、object.styleの形式では取り出せない と書いてありました。 それで、"非標準"ではあるけど、ＩＥ５以降の場合 currentStyleをそういう目的の為に使えるということです。 例えば alert(document.getElementsByTagName('A')[0].style.backgroundImage); を alert(document.getElementsByTagName('A')[0].currentStyle.backgroundImage); にしてみて下さい。 ※ＩＥでしか使えません。
お礼
currentStyle じゃないと取得できなかったんですね。 ありがとうございました。
お礼
getComputedStyle というものがあったんですね。 調べてみてもうまく情報にたどり着けなかったので大変助かりました！ ＃なお Safari では、 alert( document.defaultView.getComputedStyle(node, null).getPropertyValue('background-image') ); としないと情報を取得できないようでした。 http://www.quirksmode.org/dom/getstyles.html