2009-07-08 20 views
4

私はここで何かが欠落しているに違いないと知っていますが、これを動作させることはできません。Javascriptから非インラインCSSスタイル情報を読む

私は、ドキュメントのheadセクション内のスタイルのタグを使用してHTML文書の本文に背景色を割り当てられているが、私はJavaScriptでそれを読むしようとすると、私は何を取得:

<html> 
<head> 
<style> 
body { background-color: #ff0; } 
</style> 
</head> 
<body> 
<a href="#" onclick='alert(document.body.style.backgroundColor)'>Click Here</a> 
</body> 
</html> 

私は基本的な何かが欠けています知っている

<html> 
<head></head> 
<body style='background-color: #ff0;'> 
<a href="#" onclick='alert(document.body.style.backgroundColor)'>Click Here</a> 
</body> 
</html> 

が、私の心は、ゾーン内にない今日です - 私の最初のシナリオではない、なぜ誰も私を伝えることができます..私はスタイルをインラインで割り当てた場合しかし、それは動作しますワーキング?

ありがとうございました

+0

のhttp:/ /stackoverflow.com/questions/1048336/cant-access-css-selectors-properties-from-javascript/1048382#1048382 –

+0

これを確認してください:http://stackoverflow.com/questions/324486/how-do-you-read -css-r ule-values-with-javascript – Peter

答えて

7

DOM要素のstyleプロパティは、要素のインラインのスタイルのみを参照します。

ブラウザによっては、例えば、FirefoxでDOM CSS

を使用して要素の実際のスタイルを取得することができます:

var body = document.getElementsByTagName("body")[0]; 
var bg = window.getComputedStyle(body, null).backgroundColor; 

またはIEでの:

var body = document.getElementsByTagName("body")[0]; 
var bg = body.currentStyle.backgroundColor; 
+0

完璧 - 私が探していたものです。マットありがとう! – OneNerd

0

これはCSSの動作方法です。私が知っているJavascript内で、ブラウザ固有のユーティリティが不足している要素の計算されたCSS属性を取得する単純な方法はありません。ここで

1

InsDelhereを投稿されました(フレームワーク、すなわちを使用せずに)あなたが使用できる機能です。この場合は

function getStyle(className) { 
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules 
    for(var x=0;x<classes.length;x++) { 
     if(classes[x].selectorText==className) { 
       (classes[x].cssText) ? alert(classes[x].cssText) : alert(classes[x].style.cssText); 
     } 
    } 
} 
getStyle('.test') 
4

、あなたはstyleとしての要素にcomputedStyleをお勧めします属性はまだ設定されていません。 IEでは、something like thisを介してElementのcurrentStyleプロパティをチェックする必要があります。

関連する問題