** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요.
1. 문서객체의 영역속성
- 문서객체의 영역은 순수 가로폭과 세로높이로만 구하지는 않습니다.
- padding, border에 의해 영역이 넓어지기 때문입니다.
1) 문서객체 영역 속성의 종류
| 종류 | 설명 |
| clientHeight | padding을 포함한 높이 |
| clientWidth | padding을 포함한 폭 |
| offsetHeight | border, padding, 스크롤바를 포함한 높이 |
| offsetWidth | border, padding, 스크롤바를 포함한 폭 |
| scrollHeight |
overflow때문에 볼수 없는 높이까지 padding을 포함한 높이 |
| scrollWidth | overflow때문에 볼수 없는 폭까지 padding을 포한한 폭 |
2. 문서객체의 영역속성 예시
1) clientWidth/clientHeight
- padding을 포함한 폭과 높이입니다.
## 코드 예시
- <h1> 태그의 가로와 세로를 200px로 처리하고, padding은 30px, border는 5px처리하였습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - 문서객체의 영역속성</title>
<style>
*{ padding: 0; margin: 0; }
h1{
width: 200px; height: 200px;
padding: 30px; border: 5px solid black;
margin: 50px;
background-color: pink;
}
</style>
</head>
<body>
<h1 id="test">제목태그</h1>
<script>
//1. 문서객체선택
var test = document.getElementById('test');
console.log('width : ' + test.clientWidth);
console.log('height : ' + test.clientHeight);
</script>
</body>
</html>
## 코드 결과
- 가로폭인 200px과 패딩 양쪽 30px x 2를 더한 결과인 260로 나오는 것을 확인할 수 있습니다.
2) offsetWidth/offsetHeight
- border, padding, 스크롤바를 포함한 폭과 높이입니다.
## 코드 예시
- <h1> 태그의 가로와 세로를 200px로 처리하고, padding은 30px, border는 5px처리하였습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - 문서객체의 영역속성</title>
<style>
*{ padding: 0; margin: 0; }
h1{
width: 200px; height: 200px;
padding: 30px; border: 5px solid black;
margin: 50px;
background-color: pink;
}
</style>
</head>
<body>
<h1 id="test">제목태그</h1>
<script>
//1. 문서객체선택
var test = document.getElementById('test');
console.log('width : ' + test.offsetWidth);
console.log('height : ' + test.offsetHeight);
</script>
</body>
</html>
## 코드 결과
- 가로폭인 200px과 패딩 양쪽 30px x 2, 테두리 양쪽 5px x 2를 더한 결과인 270로 나오는 것을 확인할 수 있습니다.
3) scrollWidth/scrollHeight
- overflow때문에 볼수 없는 높이까지 padding을 포함한 폭과 높이까지 알수 있습니다.
## 코드 예시
- <h1> 태그의 가로와 세로를 200px로 처리하고, padding은 30px, border는 5px처리하였습니다.
- 그리고 내부에 더 큰 이미지를 250px로 처리하고 overflow를 scroll로 처리했습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - 문서객체의 영역속성</title>
<style>
*{ padding: 0; margin: 0; }
h1{
width: 200px; height: 200px;
border: 5px solid black;
margin: 50px;
background-color: pink; overflow: scroll;
}
img{ display: block; width: 250px; height: 250px; }
</style>
</head>
<body>
<h1 id="test"><img src="http://placehold.it/250x250" alt=""></h1>
<script>
//1. 문서객체선택
var test = document.getElementById('test');
console.log('width : ' + test.scrollWidth);
console.log('height : ' + test.scrollHeight);
</script>
</body>
</html>
## 코드 결과
- 원래 사이즈인 200px이 아니라 자손을 포함한 크기를 처리합니다. 대신 테두리는 제외된 것을 확인할 수 있습니다.
'웹언어 > JAVASCRIPT' 카테고리의 다른 글
| [JS강좌] 13.5강 기본내장객체 - Date - 오쌤의 니가스터디 (2) | 2022.03.23 |
|---|---|
| [JS강좌] 30강 dataset : 문서객체 사용자정의속성 - 오쌤의 니가스터디 (0) | 2021.07.04 |
| [JS강좌] 28강 문서객체 class관련 속성 - 오쌤의 니가스터디 (0) | 2021.06.30 |
| [JS강좌] 27강 자바스크립트 에러(Error) - 오쌤의 니가스터디 (0) | 2021.06.18 |
| [JS강좌] 26강 자바스크립트 정규표현식(RegExp) - 오쌤의 니가스터디 (0) | 2021.06.18 |
