2011-07-03 15 views
1

JavaScriptを使って「ストロボライト」を作ろうとしていて、インターネット上で私のために行うコードをいくつか見つけました...しかし、彼らはbgcolorと
bgcolor vs background-color vs backgroundColor

<html><head> 
<title>Strobe</title> 

<script> 

function toggleBgColor() 
{ 
    document.bgColor = document.bgColor == '#ffffff' ? '#000000' : '#ffffff'; 

    setTimeout('toggleBgColor()', 70); //in milliseconds 
} 
</script> 
</head> 

<body onLoad='toggleBgColor();'> 
</body></html> 



ここでは私の変化です:あなたは、私が元だ、ここで何を意味するか知っているので、私は適切であることを感じましたが、私はそれを残す場合は、コードにのみ動作しますBGCOLOR ...

<html><head> 
<title>Strobe</title> 

<script> 

function toggleBgColor() 
{ 
    document.body.style.background-color = document.body.style.background-color == '#ffffff' ? '#000000' : '#ffffff'; 

    setTimeout('toggleBgColor()', 70); //in milliseconds 
} 
</script> 
</head> 

<body onLoad='toggleBgColor();'> 
</body></html> 



私もdocument.body.style.backgroundとdocument.body.style.backgroundColorするdocument.body.style.background色を変更しようとした...それらのどれも動作しません。..何が間違っているのですか?

答えて

7

document.body.style.background-colorは、無効な識別子(まあ、技術的にそれは別の有効な識別子[color]続いオペレータ[-]、続く有効な識別子[document.body.style.background]、ですが、あなたは私が何を意味するか知っている)です。代わりにdocument.body.style.backgroundColorを使用してください。それ以外のものが正しい場合はになります。 Live example

あなたはそれを試したと言いました。問題は、あなたのコードが他の場所で失敗していると思われます。たとえば、あなたは'#ffffff'に比較している:

document.body.style.backgroundColor = document.body.style.backgroundColor == '#ffffff' ? '#000000' : '#ffffff'; 
//                  ^^^^^^^^^^^^ 

ブラウザがありません(おそらくないでしょう)のレポートをあなたに戻ってあなたが色を割り当てるために使用するのと同じ形式で。その値は、一部のブラウザでは"white"、他のブラウザではrgb(255, 255, 255)などのように戻ってきます。したがって、背景色がである場合でも、比較は頻繁に失敗します。白です。その複雑さを処理し、rgbを解析し、色名などの検索を行う必要があります。  —または上の例のようにフラグを維持してください。


オフトピックsetTimeoutに文字列を渡すことは避けてください。代わりに関数参照を直接使用してください。あなたの場合:

setTimeout(toggleBgColor, 70); //in milliseconds 

注引用符なしに、ノー()(彼らはなるのでコール機能、我々がその参照ではなく、その戻り値を渡したいです)。

(あなたはそこじゃないが、ちょうど完全性について)引数を渡す場合は、あなたがそれを行うための関数を使用することができますが:

setTimeout(function() { 
    doSomething("foo", "bar"); 
}, 70); 
+1

そのことについて申し訳ありませんええのに役立ちます希望を...それはちょっと私の部分に意味がありました... – JacKeown

+1

@JacKeown:心配しないでください。 :-) –

1

正確な推論のわからないが、CSSスタイルJavaScriptを介して参照する場合必要はありません彼らの中にその多くのブラウザ(クロームである可能性が高い

あなたはW3のリファレンスページをチェックアウトした場合、あなたは彼らが「定義と使用法」セクションのプロパティのJavaScriptのシンタックスを提供わかります:) http://www.w3schools.com/cssref/pr_background-color.asp

あなたの次の問題少なくとも)は内部的にバックグラウンドカラーを16進値として格納せず、代わりにRGBを使用します。

あなたのコード比較は "rgb(0、0、0)"と "#000000"を比較し、結果を真に返すことはありません。私の頭からすぐに修正するのは、あなたのコードでRGB値を使うことだけです。このようなものになるはずです私の頭の上オフ

私はあなたのコードの修正バージョンを想像:

function toggleBgColor() 
{ 
    document.body.style.backgroundColor = document.body.style.backgroundColor == "rgb(255, 255, 255)" ? "rgb(0, 0, 0)" : "rgb(255, 255, 255)"; 
    setTimeout('toggleBgColor()', 70); 
} 

とにかく、:)

関連する問題