ゼロからわかる現代JavaScript

ここは、ふぇりあ１６歳が不定期に連載しているオンライン小説のページです。

VNIふぇりあ16歳へ

ゼロからわかる現代JavaScript

２６．イメージ要素の作成とスタイルの書き換え「DOM」

DOMが何かが少しはイメージがつかめてきたと思います
今度はイメージ要素を作成してみましょう。

・createElement

メソッドを使い

document.createElement("img");

のようにイメージ要素を作成します。

・appendChild

をメソッドを使い

document.body.appendChild(img);

のようにbodyタグに要素を追加します。

さらに画像をファイルを読み込みます。

そしてimg要素のスタイル(スタイルシート)の表示位置の設定を
「絶対値(absolute)に指定します。
(この内容に関してはスタイルシートを参照指してください)

今回使用するソースコード chara.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
　　<SCRIPT src="javascript.js"></SCRIPT>
</head>
<body onload ="main()">

</body>
</html>

今回使用するソースコード javascrpt.js

var img;
//初期値
var x = 0;

function main() {
　　//イメージ要素の作成
　　img = document.createElement("img");
　　//<body>に要素を追加
　　document.body.appendChild(img);
　　//画像ファイルを読み込み
　　img.src = "f_mail2.gif";
　　//スタイルを絶対値に指定
　　img.style.position = "absolute";

　　//setInterval(sub, 50);
　　//でもいいかも
　　sub();
}

function sub() {
　　//キャラの座標を加算
　　x++;
　　//キャラの位置を更新
　　img.style.left = x + "px";

　　tm = setTimeout("sub()", 50);
}

そして今回はキャラの移動を再帰呼び出しとタイマーで作っています。

img.style.left = x + "px";

にて画像の表示位置を更新しています。
値のしてはpx(ピクセル)を使います。

実行結果

コラム：
再帰呼び出しを使う方法でなく

setInterval(sub, 50);

function sub() {
　　x++;
　　img.style.left = x + "px";
}

としてもいいかもしれません。