ホームページ >ウェブフロントエンド >jsチュートリアル >JSはドキュメント読み込み完了後のコード実行を実装_JavaScriptスキル
JSはドキュメント読み込み完了後のコード実行を実装_JavaScriptスキル
- WBOYオリジナル
- 2016-05-16 15:50:581250ブラウズ
特定の操作を実行するときは、ドキュメントが完全にロードされるまで待ってから実行する必要があります。そうしないと、予期しない状況が発生する可能性があります。まずコード例を見てみましょう。
<!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 ステートメントはオブジェクトを取得できません。
以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。