id指定したdivボックスのスタイルをいじる

JavaScript

id属性で指定したdivボックスのスタイルシートのプロパティにアクセスするには、例えば位置座標を変えたいって時には

document.getElementById("id名").style.left = X座標;
document.getElementById("id名").style.top = Y座標;

という具合に「getElementById」というものを使うようだ。
簡単に例を作る。

クリックしたらX方向に5ピクセル、Y方向に5ピクセル移動するdivボックス

<html>
<head>
<title>クリックで移動するdivボックス</title>

<script type="text/javascript">
<!--

var x = 0; //X座標初期値
var y = 0; //Y座標初期値

function ido() {
	x = x+5;
	y = y+5;
	document.getElementById("box").style.left = x;
	document.getElementById("box").style.top = y;
}

// -->
</script>

</head>

<body>

<div id="box" style="position:absolute;left:0px;top:0px;width:300px;height:200px;background-color:pink;" onClick="ido()">Box</div>

</body>
</html>

幅300ピクセル、高さ200ピクセル、背景ピンクにして、一応分かり易くしてみた。
これは色々遊べそうだね。