テキストを動かす

JavaScriptの入門とサンプル集

■JavaScript入門－画像・テキスト編－テキストを動かす　　　　　■戻る　　　　　■次へ　　　　　■Home

■テキストを動かす

　テキストを動かす場合も画像と同様にスタイルシートを用いますが、テキストのスタイル要素を制御するにはDOM（Document Object Model）を使わなくてはなりません。DOMはHTMLやXMLで記述された各要素を取り扱うための標準インタフェースとして1998年にW3Cによって勧告されました。IE5・ネスケ6以降のブラウザでDOMをサポートしています。それ以前はのIEでは「document.all」、ネスケでは「layer」というオブジェクトがDOMの代わりの機能をしていましたが、ネスケの「layer」についてはネスケ6で削除になりました。その過渡期にはブラウザのバージョンや両方のブラウザで動くように考慮してプログラムしていました。

★スタイルシートでテキストの座標を設定する方法

　　　<div id="テキストの名前" style="position:absolute;left:X座標;top:Y座標;">
　　　テキスト
　　　</div>

■注意
　　　　　・position:absolute;は座標系を絶対座標に設定しています。
　　　　　・スタイルシートの場合の座標の表記はピクセル単位の場合「px」を付けます。
　　　　　　座標が125ピクセルの場合「125px」と書きます。

その他のスタイルシートについてはリファレンスマニュアルを参照してください。

これらをJavaScriptで制御するには次のようになります。

★JavaScriptでスタイルシートを制御する方法

　　　　document.getElementById("テキストの名前").style.left=X座標
　　　　document.getElementById("テキストの名前").style.top=Y座標

　それでは、これらを使ってテキストが動くプログラムを作ってみましょう。

<html>
<head>
<title>テキストを動かす</title>

<script language="JavaScript"></script>

</head>

<body onLoad="setInterval('moveTxt()',25)">
<div id="txtName" style="position:absolute;left:0px;top:16px;">
テキスト
</div>
</body>
</html>

～sample14.html～のリスト

変数の初期設定

関数「moveTxr()」の設定
テキストが画面を左右に行ったり来たりする処理をします。
x座標にvを加算
テキストが画面の端まできたら反転させます。
右端を超えたらv=-2に、左端を超えたらv=2になります。
スタイルシートを操作してテキストの座標を変更します。
関数が自動的に呼び出されるようにタイマーをセットします。

HTMLが読み込まれたら関数「moveTxt()」を実行します。
スタイルシートを使ってテキストを最初の場所に描画します。

【参照】割り込み処理

　　　■sample14.htmlを実行する

sample14.htmlの実行画面

■JavaScript入門－画像・テキスト編－テキストを動かす　　　　　■戻る　　　　　■次へ　　　　　■Home