티스토리 뷰

프로그래밍/Front (HTML, CSS, JS)

[JavaScript] CSS 속성 읽어오기(currentStyle)

꼬렙 2011. 9. 27. 15:31
728x90
웹페이지에 이미지를 띄워놓고 마우스로 이동시켜야 경우가 생겨서
자바스크립트로 이미지의 현재 위치값을 가져오려고 했는데
아무리해도 값이 넘어오질 않는다

CSS 부분은 아래와 같다

<style type="text/css">
#img1 { position:absolute; left:50px; top:50px; }
</style>


다음은 자바스크립트이다

var beforeX = 0;
var beforeY = 0;

function mouseDrag() {
var obj = document.getElementById("img1");

if(beforeX > 0) {
var objLeft = obj.style.left;
var objTop = obj.style.top;

objLeft = eval(objLeft.replace("px", ""));
objTop = eval(objTop.replace("px", ""));

var locX = objLeft + (event.x - beforeX);
var locY = objTop + (event.y - beforeY);

obj.style.left = locX;
obj.style.top = locY;
}

beforeX = event.x;
beforeY = event.y;
}

분명히 document.getElementsById("ID명").style.left 와 top이 맞는데 빈칸으로 나오는 것이다

열심히 구글링을 한 결과
값을 꺼낼때는 style이 아니라 currentStyle이란 사실을 알았다

보통 두가지 형태로 CSS를 사용하는데

1. 외부선언(?)

<head>
        <style type="text/css">
                #id { 이런속성; 저런 속성; }
        </style>
</head>

<body>
        어쩌고 저쩌고
</body>



 2. inline(?)

<head>
</head>

<body>
        <img src="이미지" style="이런속성; 저런속성;" />
</body> 


명칭은 모르겠고.. 

1번의 경우는 위에서 쓴것 처럼 currentStyle을 사용해주어야 하고
2번의 경우는 그냥 style로 사용해도 상관없다(currentStyle도 같은 결과를 보여준다)

그래서 다시 소스를 정리하자면..

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>이미지 이동</title>

<script language="javascript">
var beforeX = 0;
var beforeY = 0;

function mouseDrag() {
var obj = document.getElementById("img1");

if(beforeX > 0) {
var objLeft = obj.currentStyle.left;
var objTop = obj.currentStyle.top;

objLeft = eval(objLeft.replace("px", ""));
objTop = eval(objTop.replace("px", ""));

var locX = objLeft + (event.x - beforeX);
var locY = objTop + (event.y - beforeY);

obj.style.left = locX;
obj.style.top = locY;
}

beforeX = event.x;
beforeY = event.y;
}

function mouseOut() {
beforeX = 0;
beforeY = 0;
}
</script>

<style type="text/css">
#img1 { position:absolute; left:50px; top:50px; }
</style>

</head>

<body>
<img id="img1" src="cho.jpg" onDrag="mouseDrag()" onMouseOut="mouseOut()" />
</body>

</html>


이런 형태가 된다

'프로그래밍 > Front (HTML, CSS, JS)' 카테고리의 다른 글

[JavaScript] IE, 크롬 마우스 좌표 가져오기  (0) 2011.10.24
[JQuery] 마우스 오른쪽 버튼 / 키보드 단축키 금지  (0) 2011.10.11
[JQuery] JQuery Selector  (0) 2011.09.26
[Ajax] XMLHttpRequest 객체 사용(responseXML)  (3) 2011.09.23
[Ajax] XMLHttpRequest 객체 사용(responseText)  (0) 2011.09.23