제가 최근에 준비하고 있는 프로젝트에 대한 알파 버전을 작성하고 있을 때였습니다
제가 하고 있는 일이 자바스크립트에서 리스너를 이용해서 객체를 옮기는 기능이 있는데요.
현재 좌표를 얻어오려고 하는데 되지 않더라구요.
제가 원래 썼던 구문은 다음과 같습니다.
<style type="text/css">
#box1
{
border:1px solid #FFFFFF;
background-color:#333333;
width:60px;
height:30px;
position:absolute;
left:100px;
top:100px;
}
#box2
{
border:1px solid #FFFFFF;
background-color:#666666;
width:60px;
height:30px;
position:absolute;
left:100px;
top:100px;
}
#box3
{
border:1px solid #FFFFFF;
background-color:#999999;
width:60px;
height:30px;
position:absolute;
left:100px;
top:100px;
}
#box4
{
border:1px solid #FFFFFF;
background-color:#BBBBBB;
width:60px;
height:30px;
position:absolute;
left:100px;
top:100px;
}
</style>
<script type="text/javascript">
var arDiv = document.getElementsByTagName("div");
for(i=0;i<arDiv.length;i++)
{
var obj = arDiv[i];
alert(i+" : "+obj.style.left+","+obj.style.top);
}
</script>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
</body>그런데 이게 제 생각에는
1: 100,100
2 : 200,200
3 : 300,300
4 : 400,400
나와야 하는게 맞는데 .. 결과값이
1 : ,
2 : ,
3 : ,
4 : ,
이렇게 4개가 나오더라구요. 그래서 이상하다 싶었는데 제가 갖고 있는 자바스크립트 사전을 찾아보고 했는데 도통 방법이 없다고 하더라구요. 그래서 제가 언제나 웹 프로그래밍에서 이와 같은 벽에 부딪힐 때 뒤져보는 레퍼런스인 JavaScript & DHTML Cookbook (2/E) 를 뒤져서 찾아봤습니다.(영어라서 저도 해석이 되는 부분은 직접적으로 도움을 받지만해석이 안되는 부분은 힌트만 얻고 구글링을 하는 편입니다)
그랬더니 currentStyle이라는 멤버 객체가 있다는 식으로 적혀있는겁니다. 그래서 style으로 접근하는 부분을 currentStyle로 접근하니 잘 접근이 되었습니다.
뭐 그 후 이리저리 알아본 결과, 중요한 것이 2가지가 있는 것 같습니다.
1. 자바스크립트에서 직접 스타일로 접근하면 인라인(inline)으로 부여한 속성은 표기가 되는데 CSS를 통해서 부여된 속성은 style 속성에서 얻어올 수 없고, currentStyle 속성에서 얻어와야된다는 것이었습니다. :)
2. 만약 left, top 등의 값을 넣지 않을 경우 currentStyle에서 'auto'라고 return되는 경우가 있다고 합니다.
'IT > troubleshooting' 카테고리의 다른 글
| org.codehaus.jackson.map.exc.UnrecognizedPropertyException: Unrecognized field 에러 의외의 해결법 (0) | 2011.11.25 |
|---|---|
| 맥에서 이클립스 2개 켜기 (2) | 2011.11.06 |
| .NET Framework Windows Form(C#)에서 동적으로 PictureBox를 생성해 이미지 띄우기 (1) | 2011.10.06 |
| MS SQL Server Management Studio 2005에서 LIKE를 사용할 때 (0) | 2011.01.28 |
| MS Access SQL 예약어 (1) | 2010.11.25 |
