JavaScript Maniax

■文字移動

「ブラウザ上の文字を移動させる」のは「指定した位置に文字を表示させる」ことと言いかえることが出来ます。

任意の位置に文字を表示するにはスタイルシートを使用します。
スタイルシートを記述するタグは文字列を表示するものであれば<P>や<DIV>などでもよいのですが、改行もなにもしない<SPAN>タグを使用するのが一般的です。

<SPAN id="text01" style="position:absolute; top:100px; left:100px;>test</SPAN>

上記の様に属性[position]にabsolute（絶対位置指定）を指定することによって、任意の位置にタグを表示させることができます。
topがドキュメント内の上からの距離、leftが左からの距離となります。

styleで指定した位置はjavascriptで変更できます。
SPANタグ等のオブジェクトは、命名したidを使用して

document.all.部品ID

で指定することが出来ます。
部品IDに変数を使用したい場合には

document.all.item(部品IDを格納した変数)

で指定することが出来ます。

指定したタグのstyleを変更しますので、

document.all.text01.style.top = "20px";

と記載することで、文字列「test」は画面上部から20ピクセルの位置に移動します。

topやleftに指定する際、ピクセルを表す「px」は省略することが出来ます。
javascript自体には変数に型の概念がない為、

document.all.text01.style.top = 20;

という指定を行っても

document.all.text01.style.top = "20px";

とは同じ動作をしますが、あくまでもtopやleftに指定しているのは文字列であることに注意してください。
例えば

document.all.text01.style.top = 20;

とpxを省略して指定した後、

alert(document.all.text01.style.top);

として登録された値を表示してみると、px付きの文字列になっていることが分かります。
そのため、

document.all.text01.style.top++;
document.all.text01.style.top = document.all.text01.style.top + 1;

等の指定の仕方はいずれもエラーとなってしまいます。

現在位置を使用したい場合は

y=document.all.text01.style.top.replace("px", "");
y++;
y+="px";
document.all.text01.style.top=y;

などの様に一度pxを外してから演算する必要があります。

勘の良い方はお気づきの通り、上記方法で座標以外にも文字の色やサイズなどを変更することも可能です。

文字の色は
document.all.text01.style.color
サイズは
document.all.text01.style.fontSize
（styleSeetでは「font-size」と指定する点との混同に注意）
に値を入力することで指定することが出来ます。

なお、SPANタグ内の文字列を変更するには

document.all.text01.innerText = "test_002"

などの様に指定することができます。
また、

document.all.text01.innerHTML = "<B>test_002</B>"

と指定してHTMLを記述することも出来ますので、画像表示/変更なども可能です。

応用編

フォーム部品の移動をする場合も殆ど同じ方法で指定が可能です。
まず、フォーム部品に関してもpositionを絶対位置指定にする必要があります。

<FORM name="form01" method="post">
<INPUT name="button01" type="button" value="push" style="position:absolute; top:20px; left:20px; ">
</FORM>

部品を指定する書式は

document.フォーム名.部品名

です。
部品名を変数にする場合は

document.フォーム名.elements[部品名を格納した変数]

で指定することが出来ます。
上記SPANタグの場合と指定方法が違うことに注意が必要です。

オブジェクトの指定方法としては上記の他、

document.getElementById(部品IDを格納した変数)
document.getElementsByName(部品名を格納した変数)

といった方法もあります。
とくに以下の違いが間違いやすい点なので気をつけてください。
getElementById
getElementsByName
両者の違いには意味があります。
idは画面内で一意の値をつけなければなりませんので、単体のElementを返しますが、
nameは画面内で重複しても良いのでElementの配列を返します。
そのため、下記のように参照方法が異なります。

element1 = document.getElementById(elementId);
alert(element1.value);
element2 = document.getElementsByName(elementName);
alert(element2[0].value);