JSはドキュメント読み込み完了後のコード実行を実装_JavaScriptスキル-jsチュートリアル-php.cn

JSはドキュメント読み込み完了後のコード実行を実装_JavaScriptスキル

WBOY

リリース： 2016-05-16 15:50:58

オリジナル

1288 人が閲覧しました

特定の操作を実行するときは、ドキュメントが完全にロードされるまで待ってから実行する必要があります。そうしないと、予期しない状況が発生する可能性があります。まずコード例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>脚本之家</title>
<style type="text/css"> 
div{ 
 width:200px; 
 height:200px; 
} 
</style> 
<script type="text/javascript"> 
document.getElementById("mytest").style.backgroundColor="#639"; 
</script> 
</head> 
<body> 
<div id="mytest"></div> 
</body> 
</html>

ログイン後にコピー

上記のコードの本来の目的は、div の背景色を #639 に設定することですが、これは、ドキュメントがロードされるときにコードが順次実行されるためです。背景色を設定するコードが実行されましたが、指定された div にロードされていないため、js ステートメントはオブジェクトをまったく取得できませんでした。コードは次のように変更されます:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>脚本之家</title>
<style type="text/css"> 
div{ 
 width:200px; 
 height:200px; 
} 
</style> 
<script type="text/javascript"> 
window.onload=function(){ 
 document.getElementById("mytest").style.backgroundColor="#639"; 
} 
</script> 
</head> 
<body> 
<div id="mytest"></div> 
</body> 
</html>

ログイン後にコピー

上記のコードは関数内に配置されており、この関数が window.onload イベントのイベントハンドラーとして使用されているため、期待どおりの効果が得られます。 window.onload イベントをトリガーする条件は、現在のドキュメントが完全にロードされていることです。このイベントがトリガーされると、すべてのドキュメントがロードされているため、イベント処理関数が実行されます。 js ステートメントはオブジェクトを取得できません。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。