logo

JavaScript のオンロード

JavaScript では、このイベントを適用して、ページが完全に表示されたときに特定の機能を起動できます。訪問者のブラウザの種類とバージョンを確認するためにも使用できます。ページでどのような Cookie が使用されているかを確認するには、 オンロード 属性。

HTML では、オブジェクトがロードされたときに onload 属性が起動されます。この属性の目的は、関連する要素が読み込まれるときにスクリプトを実行することです。

HTML では、 オンロード 属性は通常、 要素を使用して、Web ページのコンテンツ (CSS ファイル、画像、スクリプトなどを含む) が完全に読み込まれた後にスクリプトを実行します。他の HTML 要素でも使用できるため、 tag のみで使用する必要はありません。

の違いは、 document.onload そして window.onload は: document.onload 画像やその他の外部コンテンツをロードする前にトリガーします。前に発射されます window.onload 。一方、 window.onload CSS ファイル、スクリプト ファイル、画像などを含むページ全体が読み込まれるときにトリガーされます。

アームストロング数

構文

 window.onload = fun() 

いくつかの例を使用してこのイベントを理解しましょう。

Javaでメソッドを呼び出す方法

例1

この例では、高さ 200px、幅 200px の div 要素があります。ここで使用しているのは、 window.onload() の背景色、幅、高さを変更するには、 ディビジョン Web ページをロードした後の要素。

背景色が設定されているのは、 '赤' 、幅と高さは次のように設定されます。 300ピクセル それぞれ。

 window.onload() #bg{ width: 200px; height: 200px; border: 4px solid blue; } window.onload = function(){ document.getElementById(&apos;bg&apos;).style.backgroundColor = &apos;red&apos;; document.getElementById(&apos;bg&apos;).style.width = &apos;300px&apos;; document.getElementById(&apos;bg&apos;).style.height = &apos;300px&apos;; } <h2> This is an example of window.onload() </h2> 
今すぐテストしてください

出力

コードを実行してページをロードすると、出力は次のようになります -

JavaScript のオンロード

例2

この例では、DOM オブジェクトのプロパティと関数を使用して単純なアニメーションを実装しています。 JavaScript 。私たちが使用するのは、 JavaScript関数 getElementById() を使用して DOM オブジェクトを取得し、そのオブジェクトをグローバル変数に割り当てます。

選択ソートJava
 var img = null; function init(){ img = document.getElementById(&apos;myimg&apos;); img.style.position = &apos;relative&apos;; img.style.left = &apos;50px&apos;; } function moveRight(){ img.style.left = parseInt( img.style.left) + 100 + &apos;px&apos;; } window.onload = init; <p>Click the below button to move the image right</p> 
今すぐテストしてください

出力

上記のコードが正常に実行されると、出力は次のようになります -

JavaScript のオンロード

ここで、HTML を使用する例があります。 オンロード 属性と JavaScript 関数。

例3

HTMLを使用した簡単な例です。 オンロード 属性をJavaScriptで定義された関数で指定します。この例では、 アラート() この関数はドキュメントが更新されるたびに呼び出されます。

 function fun() { alert(&apos;Hello World!!, Welcome to the javaTpoint.com&apos;); } <p> Try to refresh the document to see the effect. </p> 
今すぐテストしてください

出力

Javaのif else文のコーディング

上記のコードを実行すると、出力は次のようになります -

JavaScript のオンロード