0

最初の1つ：

function change(){
    document.getElementById("clr").style.backgroundColor="red";
    document.getElementById("test1").innerHTML="hwllo world";
}

二つ目：

document.getElementById("test1").innerHTML="hwllo world";

最初のものは正常に動作しています。しかし、ファイルがロードされたときに2番目のものは機能しません。

4

3 に答える 3

2

そして、コンソールにはどのようなエラーがありますか? 存在しないノードの innerHTML を設定しようとしている可能性がありますか? div を操作する場合は、ページが読み込まれた後に行う必要があるため、通常はこれを body イベント onLoad として呼び出します。

<script>
function init() {
  document.getElementById("test1").innerHTML="hello world";
}
</script>

<body onload="init();">
<div id="test1"></div>
...
于 2013-05-29T07:12:04.703 に答える
2

Javascript と HTML のレンダリングは、ファイル内で見つかった順序で実行されます。したがって、HTML 要素がレンダリングされる前に JS の一部を実行している場合、JS コードは機能しません。

これは失敗します:

<script>
  document.getElementById("test1").innerHTML="hwllo world";
</script>
<div id="test1"></div>

これは期待どおりに機能します。

<div id="test1"></div>
<script>
  document.getElementById("test1").innerHTML="hwllo world";
</script>

または、さまざまな onload および dom ready イベントを使用して、すべての HTML がレンダリングされた後にスクリプトが実行されるようにすることもできます。

<script>
  window.onload = function(){
    document.getElementById("test1").innerHTML="hwllo world";
  }
</script>
<div id="test1"></div>
于 2013-05-29T07:11:03.923 に答える
1

James Allardice がコメントで述べたように、コードはおそらく DOM の準備が整う前に実行されます。要素がそこにない可能性があるため、コードが失敗する可能性があります。これは既知の問題ですが、既知の解決策もあります。最もよく使用される解決策は、おそらくjQueryを使用することです。これには、ドキュメントの準備ができた後にのみ関数を実行できるようにする簡単な方法があります。この方法を使用するには、まず jQuery をスクリプト リファレンスとして含めてから、次のようにコードを変更する必要があります。

$(document).ready(function() {
    document.getElementById("clr").style.backgroundColor="red";
    document.getElementById("test1").innerHTML="hwllo world";
});

とにかく jQuery を使用している場合は、コードを書き直して jQuery セレクターを使用し、コードをもう少しコンパクトにすることもできます。

$(document).ready(function() {
    $("#clr").css("backgroundColor", "red");
    $("#test1").html("hwllo world");
});

両方のコードは機能的に同等です。

于 2013-05-29T07:09:03.100 に答える