1. getBoundingClientRect();
* 엘리먼트의 크기를 반환한다. <style의 값>
* IE에서는 width의 값을 제공하지 않는다.
* 태그의 중첩 시에는 top이나 right 값을 통해 기준이 부모가 아닌 body라는 것을 알 수 있다.
* 이를 명시적으로 확인할 수 있는 방법은 offsetParent 속성을 호출하는 것이다.
* 테두리를 제외한 엘리먼트의 크기를 알고 싶다면 ClientWidth, ClientHeight를 사용한다.
* Viewport의 좌표를 사용한다. ( ※ 2번 참조 )
- 예제 ! F12 개발자 도구를 열어 콘솔창에서 결과를 확인한다.
<style>
body{
padding:0;
margin:0;
}
#target{
width:100px;
height:100px;
border:50px solid #1065e6;
padding:50px;
margin:50px;
}
</style>
</head>
<body>
<div id="target">
Coding
</div>
<script>
var t = document.getElementById('target');
console.log(t.getBoundingClientRect());
</script>
- 결과
2. Viewport
* 문서의 내용 중 사용자에게 보여지는 부분을 의미한다. 이에따라 문서의 좌표와 Viewport의 좌표가 있다.
* Viewport 좌표는 스크롤이 생기면 스크롤의 위치에 따라 요소의 위치가 달라진다.
* 스크롤의 정도를 알고 싶으면 window.pageYOffset 속성을 사용하면 알 수 있다. (※ 구버전 웹브라우저는 scrollTop 속성 이용 )
- 사용 예
* getBoundingClientRect의 top 속성과 window.pageYOffset의 값이 1초마다 출력
<style> body{ padding:0; margin:0; } div{ border:50px solid #1065e6; padding:50px; margin:50px; } #target{ width:100px; height:2000px; } </style> <div> <div id="target"> Coding </div> </div> <script> var t = document.getElementById('target'); setInterval(function(){ console.log('getBoundingClientRect : ', t.getBoundingClientRect().top, 'pageYOffset:', window.pageYOffset); }) </script>
3. 문서의 좌표
* Viewport의 좌표에 스크롤의 정도를 더하면 알 수 있다.
// 위 예제의 함수만 바꿔준다
setInterval(function(){
console.log('getBoundingClientRect : ', t.getBoundingClientRect().top,
'pageYOffset:', window.pageYOffset,
'document y:', t.getBoundingClientRect().top+window.pageYOffset); //문서의 좌표
}, 1000)4. 스크롤
* 스크롤을 제어한다
* scrollLeft와 scrollTo 프로퍼티를 이용한다.
- 예제 ) 문서의 스크롤 값을 변경해보자. >실행 화면 링크<
<style> body{ padding:0; margin:0; } div{ border:50px solid green; padding:50px; margin:50px; } #target{ width:100px; height:2000px; } </style> <input type="button" id="scrollBtn" value="scroll(0, 1500)" /> //스크롤 이동 버튼 <div> <div id="target"> Scroll </div> </div> <script> document.getElementById('scrollBtn').addEventListener('click', function(){ //스크롤 이동 버튼을 눌렀을 때 window.scrollTo(0, 1500); //스크롤 이동 }) </script>
5. 스크린
* 크기는 모니터의 크기와 브라우저 Viewport의 크기가 있다.
* window.inner.* 은 Viewport의 크기를 나타낸다.
* screen.* 은 스크린의 크기를 나타낸다.
- 스크린의 크기를 알아내는 방법
<script>
console.log('window.innerWidth:', window.innerWidth, 'window.innerHeight:', window.innerHeight);
console.log('screen.width:', screen.width, 'screen.height:', screen.height);
</script>
'WEB > JavaScript' 카테고리의 다른 글
| 이벤트 : 등록방법 (0) | 2016.10.16 |
|---|---|
| 이벤트 (0) | 2016.10.16 |
| Text 객체 : 조작 API (0) | 2016.10.16 |
| Text 객체 : 값 API (0) | 2016.10.16 |
| Text 객체 (0) | 2016.10.16 |
