「DOM：DOMを使ってみる」-サンプルページ-

window.onload=init; //ページの読み込みが完了したとき、initを実行する
function init() {
	document.getElementById("btnMove").onclick=startMove;
}

var n=0; //変数nの初期値0
var m=50; //変数mの初期値50
function startMove() {
	n=n+m;
	var moveNode=document.getElementById("moveImg"); //変数moveNodeに、id="moveImg"のノードを代入
	moveNode.style.left=n+"px"; //moveNodeのスタイルを変更→left:[n]px;
	if (n>300) { //nが300を超えたら
		n=0-m; //nを最初の場所に戻す
	}
}

var i=1; //変数iの初期値1
function fadeOut() {
	var fadeImg=document.getElementById("btnMove"); //変数fadeImgに、id="btnMove"のノードを代入
	i -= 0.1; //i=i-0.1
	fadeImg.style.opacity=i; //fadeImgのスタイルを変更→透明度の変更
	fadeImg.style.filter="alpha(opacity="+(i*100)+")"; //IE対策
	if (i<0) {
		i=0;
	}
}
function fadeIn() {
	var fadeImg=document.getElementById("btnMove"); //変数fadeImgに、id="btnMove"のノードを代入
	i += 0.1; //i=i+0.1
	fadeImg.style.opacity=i; //fadeImgのスタイルを変更→透明度の変更
	fadeImg.style.filter="alpha(opacity="+(i*100)+")"; //IE対策
	if (i>1) {
		i=1;
	}

}