javascript_화면 거리 분석 요약

3820 단어
브라우저 윈도우에서 현재 요소 가져오기 위치 PS: 읽기 전용 속성이며 설정할 수 없습니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>      </title>
<style type="text/css">
	#div1{
		width:150px;
		height:100px;
		border:2px solid #4455ff;
		position:absolute;
		top:300px;
		left:230px;
		overflow:auto;
	}	
	#div2{
		
		
	}
	#div2_1{
		
	}
	#div3{
		
	}
</style>
</head>
<body>
	<div id="div1">

		     <br>
		                
		111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
		
		                
		                
		                
		                
		                
		                
		                
		                
		                
		                
		                
		                
		                
		                
		                
	</div>
	<div id="div2">
		<div id="div2_1">
		</div>
	</div>
	<div id="div3">
		
	</div>
	<script type="text/javascript" charset="utf-8">
		var div1 = document.getElementById("div1");
		console.log(div1);
		div1.scrollTop=10;
		div1.scrollLeft=10;
		with(document){
			write('          '+div1.offsetTop+'<br>');
			write('          '+div1.offsetLeft+'<br>');
			write('           '+div1.offsetWidth+'<br>');
			write('           '+div1.offsetHeight+'<br>');
			write('            '+div1.clientHeight+'<br>');
			write('           '+div1.clientHeight+'<br>');
			write('           '+div1.scrollTop+'<br>');
			//   scrollTop         , scrollLeft         ??
			write('                  '+div1.scrollWidth+'<br>');
			write('                  '+div1.scrollHeight+'<br>');
		}
		//          -----  
		//Firefox             ??       
		div1.onclick=function(event){
			with(document){
				console.log('         X           '+event.clientX+'<br>');
				console.log('         Y          '+event.clientY+'<br>');
				//                    ??
				console.log(''+event.offsetX+'<br>');
				console.log(event.offsetY);
			}
		}
		//         
div1.onscroll=function(event){
	//console.log(event);
	console.log(div1.scrollTop);
}

	</script>
</body>
</html>

좋은 웹페이지 즐겨찾기