객체의 style 값 알아오기 문제
Posted: 2006 04 18 13:10 34
document에 클릭 이벤트가 왔을 때 A라는 div의 위치를 이벤트가 일어난 곳
으로 이동시키려고 합니다. 이때 A div의 스타일을 head안에 정의하면 값을 제대
로 얻어올 수 없는 문제가 있었습니다. inline 스타일로 정의하면 얻어올 수
있습니다. 이 문제 해결하는 방법을 좀 알고 싶습니다. ㅠㅠ
#############################################
############# 안되는 소스 ###############
<html>
<head>
<style type="text/css">
#div1 { position:absolute; border:1px solid black; width:100px; height:110px; top:200px; left:210px; }
</style>
<script type="text/javascript">
function test1( obj )
{
alert(obj.style.display);
alert(obj.style.top);
alert(obj.style.left);
alert(obj.style.width);
alert(obj.style.height);
}
</script>
</head>
<body>
<div id="div1" onclick="test1(this);"></div>
</body>
</html>
#############################################
#############################################
############# 되는 소스 ###############
<html>
<head>
<script type="text/javascript">
function test1( obj )
{
alert(obj.style.display);
alert(obj.style.top);
alert(obj.style.left);
alert(obj.style.width);
alert(obj.style.height);
}
</script>
</head>
<body>
<div id="div1" style="position:absolute; border:1px solid black; width:100px; height:110px; top:200px; left:210px;" onclick="test1(this);"></div>
</body>
</html>
#############################################
으로 이동시키려고 합니다. 이때 A div의 스타일을 head안에 정의하면 값을 제대
로 얻어올 수 없는 문제가 있었습니다. inline 스타일로 정의하면 얻어올 수
있습니다. 이 문제 해결하는 방법을 좀 알고 싶습니다. ㅠㅠ
#############################################
############# 안되는 소스 ###############
<html>
<head>
<style type="text/css">
#div1 { position:absolute; border:1px solid black; width:100px; height:110px; top:200px; left:210px; }
</style>
<script type="text/javascript">
function test1( obj )
{
alert(obj.style.display);
alert(obj.style.top);
alert(obj.style.left);
alert(obj.style.width);
alert(obj.style.height);
}
</script>
</head>
<body>
<div id="div1" onclick="test1(this);"></div>
</body>
</html>
#############################################
#############################################
############# 되는 소스 ###############
<html>
<head>
<script type="text/javascript">
function test1( obj )
{
alert(obj.style.display);
alert(obj.style.top);
alert(obj.style.left);
alert(obj.style.width);
alert(obj.style.height);
}
</script>
</head>
<body>
<div id="div1" style="position:absolute; border:1px solid black; width:100px; height:110px; top:200px; left:210px;" onclick="test1(this);"></div>
</body>
</html>
#############################################