javascript - このJavaScriptコードgetElementByIdの何が問題になっていますか？

Question

私はこのコードを以下に持っています。

<script>  document.getElementById('example').style.background-color =
'#FFCC00';    
</script>
<div id="example">This is an example.</div>

なぜそれが機能しないのですか？

Answer 1

スクリプトは、指定されたIDを持つ要素が存在する前に実行され、ハイフンを含むDOMプロパティ名があります（マイナス演算子として扱われます）。

<!-- Put the element first -->
<div id="example">This is an example.</div>
<script>
    // camelCase CSS property names when converting to DOM property names
    document.getElementById('example').style.backgroundColor = '#FFCC00';    
</script>

上記のスニピットの実例をご覧ください。

要素を最初に配置する代わりに、JSステートメントを関数でラップし、要素が存在した後でそれを呼び出すことができます。これは、イベントハンドラーとして適切なもの（ドキュメントの読み込みイベントなど）にバインドすることで自動的に発生させることができます。

Answer 2

あなたはbackgroundColorを書くべきです

Answer 3

コードで変更する必要がある2つのこと。

1. 現状では、コードの順序が間違っています。最初にHTMLを使用し、次にJSを使用する必要があります。要素はこの順序でまだ存在していません。JSが最初に実行されており、DOMオブジェクトはまだ存在していません。

2. 「background-color」プロパティはありません。代わりに「.backgroundColor」を使用してください。ダッシュは通常、キャメルケースに置き換えられます。

これが実際の例です：

<div id="example">This is an example.</div>

<script>
  document.getElementById('example').style.backgroundColor = '#FFCC00';
</script>

別のヒント：

依存関係としての順序を削除する場合は、JavaScriptを「onload」イベントハンドラーでラップできます。

Answer 4

<script>要素の下にあるように変更して、backgroundColor

<div id="example">This is an example.</div>
<script>  
    document.getElementById('example').style.backgroundColor ='#FFCC00';    
</script>

Answer 5

アップデート：

<div id="example">This is an example.</div>
<script>document.getElementById('example').style.setProperty('background-color','#fco','important');</script>

、「重要」は必要ありません