-
웹브라우저 자바스크립트 - 문서의 기하학적 특성JavaScript/생활코딩 2018. 11. 29. 15:31
문서의 기하학적 특성 - https://opentutorials.org/course/1375/7112
엘리먼트들의 크기, 위치와 엘리먼트들을 화면에 표시하기위해서 스크롤같은 것들을 제어하는 방법에 대한 내용이다.
요소의 크기와 위치
자바스크립트와 웹브라우저가 제공하는 API를 이용해서 엘리먼트의 위치와 크기를 알아낼 수 있다.
하나의 div
<!DOCTYPE html>
<html>
<body>
<style>
body{
padding:0;
margin:0;
}
#target{
width:100px;
height:100px;
border:50px solid #1065e6;
padding:50px;
margin:50px;
}
</style>
<div id="target">
Coding
</div>
<script>
var t = document.getElementById('target');
console.log(t.getBoundingClientRect()); //getBoundingClientRectap api호출하면 콘솔창에서 style에 있는 요소들의 크기와 위치를 알 수 있다.
</script>
</body>
</html>
[실행화면 및 콘솔창]
div의 중첩
<!DOCTYPE html>
<html>
<body>
<style>
body{
padding:0;
margin:0;
}
<!--추가된 div-->
div{
border:50px solid #1065e6;
padding:50px;
margin:50px;
}
<!--taget값도 변경됨-->
#target{
width:100px;
height:100px;
}
</style>
<!--div태그가 하나더 추가됨-->
<div>
<div id="target">
Coding
</div>
</div>
<script>
var t = document.getElementById('target');
console.log(t.getBoundingClientRect()); //getBoundingClientRect 메소드는 테두리인 border를 포함하여 width값을 측정하지만 border를 제외한 값을 측정하고 싶다면 ClientWidth, ClientHeight을 사용하면 된다. (t.clientWidth, t.clientHeight)
console.log(t.offsetParent); //offsetParent은 t객체가 어떤 것을 기준으로 측정되는지 알려주는 메소드 -> 콘솔창에서 확인해보면 body를 기준으로 측정된다는 것을 확인 할 수 있다.
</script>
</body>
</html>
[실행화면 및 콘솔창]
Viewport :브라우저에서 사용자에게 보여주는 영역
문서에서 viewport의 좌표를 알아야 한다.
<!DOCTYPE html>
<html>
<body>
<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(){ //setInterval은 1000(1초)에 한번씩 호출하는 메소드
console.log('getBoundingClientRect : ', t.getBoundingClientRect().top, 'pageYOffset:', window.pageYOffset); //pageYOffset API는 스크롤을 한 크기
}, 1000)
</script>
</body>
</html>
[실행화면 및 콘솔창]
스크롤을 하게되면 pageYOffset 값이 스크롤한 만큼의 px로 표시된다.
스크롤제어
사용자의 스크롤을 제어할 수 있다.
<!DOCTYPE html>
<html>
<body>
<style>
body{
padding:0;
margin:0;
}
div{
border:50px solid #1065e6;
padding:50px;
margin:50px;
}
#target{
width:100px;
height:2000px;
}
</style>
<input type="button" id="scrollBtn" value="scroll(0, 1000)" />
<div>
<div id="target">
Coding
</div>
</div>
<script>
var t = document.getElementById('scrollBtn');
document.getElementById('scrollBtn').addEventListener('click', function(){ //버튼을 클릭하여 click이벤트가 발생하면 함수 실행
window.scrollTo(0, 1000); //0은 x좌표, 1000은 y좌표, 좌표만큼 스크롤을 움직인다.
console.log('getBoundingClientRect : ', t.getBoundingClientRect().top, 'pageYOffset:', window.pageYOffset);
})
</script>
</body>
</html>
[실행화면 및 콘솔창]
버튼을 클릭했을 때 실행화면으로 Y좌표가 1000만큼 내려온 것을 알 수 있다.
스크린의 크기
아래 API들은 스크린, 브라우저의 크기를 확인 할 수 있다.
window.innerWidth
window.innerHeight
screen.width
screen.height
<!DOCTYPE html>
<html>
<body>
<script>
console.log('window.innerWidth:', window.innerWidth, 'window.innerHeight:', window.innerHeight); //window.innerWidth은 브라우저의 가로길이, window.innerHeight은 브라우저의 세로길이
console.log('screen.width:', screen.width, 'screen.height:', screen.height); //screen.width은 모니터의 가로길이, screen.height은 모니터의 세로길이
</script>
</body>
</html>
[콘솔창]
'JavaScript > 생활코딩' 카테고리의 다른 글
웹브라우저 자바스크립트 - inline (0) 2018.11.29 웹브라우저 자바스크립트 - 이벤트 (0) 2018.11.29 웹브라우저 자바스크립트 - 조작 API (0) 2018.11.28 웹브라우저 자바스크립트 - 값 API (0) 2018.11.28 웹브라우저 자바스크립트 - Text 객체 (0) 2018.11.28 댓글
