は、javascriptオブジェクトをdom要素に変換します

私は長い間この混乱を経験しました。クロム・インスペクタで「読み込み不可能」というエラーが発生しました。は、javascriptオブジェクトをdom要素に変換します

私は、DOM要素にプロパティ（例えばスタイル）を適用できることを発見しましたが、javascriptオブジェクトとしてレンダリングされた場合、上記のエラーが発生します。

どのように私はこれについて行きますか？

<html> 
    <head> 
     <style> 
      #test {background:black;width:30px;height:30px;} 
     </style> 
     <script> 
      var a = document.getElementById('test'); 
      a.style.background = "#f00"; 
     </script> 
    </head> 
    <body> 
      <div id="test"> 
      </div> 
</body> 
</html>

警告（typeof）をしたとき。オブジェクトとして与える。だから、私はどのようにして、一般に要素のプロパティを変更するのですか？

出典

2011-08-03 Aaditi Sharma

私は本当に 'A'は、DOM要素を含んでいます、そしてあなたがプロパティを参照する方法が正しいとあれば動作するはずです、あなたの例では...あなたが求めているものを理解していません要素がスクリプトの実行時にDOMにあります。 –

スクリプト実行時に#testが存在しないという問題があります。スクリプトはページがロードされると直ちに実行され、ブラウザがスクリプトを実行する時点では<div id="text"></div>に達していないので、document.getElementById('test')はnullを返します。

null値にはプロパティがないため、a.style.background...を呼び出すとJavaScriptがエラーになります。あなたはbody.onloadにこのスクリプトを添付たい場合は、提供されるコールバック関数は、ページの残りの部分が読み込まれた後に実行します：

document.body.onload = function(){ 
    var a = document.getElementById('test'); 
    if (a) //just a check to make sure that `a` was set so that it doesn't error again. 
    { 
    a.style.background = "#f00"; 
    } 
};

出典

2011-08-03 18:41:53 zzzzBov

zzzzBovは正しいです：http://jsfiddle.net/4crMR/ –

ああ。とった。ありがとうございました:) –

ページの読み込みが完了する前に、あなたのJavaScriptが実行されています。

あなたはこのようなwindow.onload内のあなたのjavascriptを配置する必要があります：

window.onload = function() 
{ 
    var a = document.getElementById('test'); 
    a.style.background = "#f00"; 
}

出典

2011-08-03 18:43:30 psynnott

実際のところ見てください：http://jsfiddle.net/6BqYx/ – psynnott

あなたは、コード要素呼び出しているときので、あなたは、DOMが完全にそのスクリプトを呼び出す前にロードされるのを待つ必要がありますまだ作成されていません。

http://jsfiddle.net/m5Qqs/1/

出典

2011-08-03 18:44:51

は、javascriptオブジェクトをdom要素に変換します

答えて

関連する問題