태그 객체의 속성 - 위치

개요

태그 객체에서도 style속성에 있는 left, right, top, bottom 속성을 이용하여 위치정보를 변경 할 수 있다.

이때, style 속성 혹은 CSS에서 객체의 좌표는 absolute 혹은 fixed 혹은 relative 로 변경 되어야 한다.
크기정보처럼 offsetLeft, offsetTop, clientLeft, scrollLeft 등이 있으며 나머지 사용법은 크기 속성의 사용법과 비슷하다.

사용법

var st = document.getElementById("stalker");
st.style.left = (st.offsetLeft + 100) + "px";

예제

<html>
<head>
	<script type="text/javascript">
		function change() {
			var box = document.getElementById("box");
			box.style.left =( box.offsetLeft + 100) + "px";
		}
	</script>
	<style>
		div#box{
			background-color:#ccc;
			width:50px;
			height:50px;
			position:relative;
		}
	</style>
</head>
<body>
	<div id="box" onclick="change()"></div>
</body>
</html>
출력 결과: