js--이벤트 대상의 이해 3

1185 단어 js
인스턴스 2: 마우스를 따르는 DIV -
<script>

document.onmousemove=function (ev)

{

	var oEvent=ev||event;

	var oDiv=document.getElementById('div1');

	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

	var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;

	

	oDiv.style.left=oEvent.clientX+scrollLeft+'px';

	oDiv.style.top=oEvent.clientY+scrollTop+'px';   // , 。oEvent.clientY+scrollTop

	// document.documentElement.scrollTop; document.body.scrollTop;

};

</script>


인스턴스 3: offsetLeft
  
<head>

<style>

#div1 {width:100px; height:100px; background:red; border:1px solid black; padding:10px; margin:20px; position:absolute; left:100px; top:100px;}

</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title> </title>

<script>

window.onload=function ()

{

	var oDiv=document.getElementById('div1');

	

	alert(oDiv.offsetLeft);

};

</script>

</head>



<body>

<div id="div1"></div>

</body>


좋은 웹페이지 즐겨찾기