HOWTO · JavaScript
JavaScript에서 div 요소의 높이 가져 오기
이 튜토리얼에서는 JavaScript 내에서 div 요소의 높이를 가져 오는 방법을 소개합니다.
HTML에서는 CSS 스타일 시트를 사용하거나 JavaScript를 사용하여 요소에 제공하는 모든 CSS 속성이 문서 개체 모델 (DOM) 내에 설정됩니다. 이 DOM을 통해 나중에 JavaScript 코드 내에서 이러한 값에 쉽게 액세스 할 수 있습니다. JavaScript 내에서 CSS 속성 값을 가져 오는 방법에는 여러 가지가 있습니다. 이 기사에서는 JavaScript 코드에서 CSS 속성height를 가져 오는 방법을 소개합니다.
아래는 우리가 만든 HTML 문서입니다. 내부에는container의id가있는 단일div요소 만 포함 된body태그가 있습니다. head태그에서 너비, 높이, 테두리, 패딩 등과 같은 div 요소에 몇 가지 기본 스타일을 제공했습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container{
width: 100px;
height: 50px;
border: 1px solid red;
padding: 4px;
background-color: cadetblue;
}
</style>
</head>
<body>
<div id="container"></div>
<script></script>
</body>
</html>
출력:
위의 HTML 문서를 실행하면 브라우저 창에 이와 같은 직사각형이 표시됩니다.
이제 모든 것이 설정되었으므로이container div 요소에 다양한 속성을 적용하여 높이를 가져옵니다. 우리가 작성할 코드는body태그 안에있는<script></script>태그 안에 들어갑니다.
JavaScript에서div요소 높이를 가져 오는 다양한 방법
먼저getElementById()메소드를 사용하여 HTML DOM에서container요소의 참조를 가져옵니다. 그런 다음 해당 요소를 JavaScript의element변수에 저장합니다.
let element = document.getElementById('container');
이제 div 요소가 있으므로 JavaScript를 사용하여 다양한 속성을 사용하여div의 높이를 가져 오겠습니다.
1.clientHeight
clientHeight는 패딩을 포함하는 요소의 높이를 정수 값으로 반환합니다.
console.log(element.clientHeight);
출력:
58
현재50px인 높이를 계산하는 동안 컨테이너의 네면 모두에4px패딩을 추가 했으므로4px상단 및4px하단의 패딩, 즉8px의 총 패딩은 높이에 추가됩니다. 그러면 전체 높이가58px가됩니다.
2.offsetHeight
offsetHeight는 패딩, 테두리 및 수평 스크롤바 (있는 경우)도 포함하는 요소의 높이로 구성됩니다.
console.log(element.offsetHeight);
출력:
60
clientHeight속성과 유사하게offsetHeight속성은8px패딩,50px인 콘텐츠 높이, 그리고 총 2px 인1px상단 및1px하단 인 테두리 너비를 사용합니다. 따라서이 속성이 반환하는 전체 높이는8 + 50 + 2즉60px가됩니다.
3.scrollHeight
scrollHeight는 오버플로로 인해 화면에 표시되지 않는 콘텐츠를 포함하여 콘텐츠의 높이를 반환합니다. 요소의 패딩 만 포함하고 테두리, 여백 또는 가로 스크롤 막대는 포함하지 않습니다.
scrollHeight는clientHeight와 유사합니다. clientHeight와scrollHeight의 유일한 차이점은scrollheight가 콘텐츠의 높이를 포함 할 수 있다는 것입니다. 이는 오버플로로 인해 현재 화면에 표시되지 않습니다.
console.log(element.scrollHeight);
출력:
58
콘텐츠의 높이는50px이고 총 패딩은8px입니다. 따라서scrollHeight속성이 반환하는 총 높이는58px입니다.
4.getBoundingClientRect()
getBoundingClientRect() 메소드는 뷰포트에 상대적인 위치 (x, y, 상단, 왼쪽 등)뿐만 아니라 요소의 너비와 높이와 관련된 정보를 포함하는 객체를 반환합니다. 이 방법으로 계산 된 높이에는 패딩과 테두리도 포함됩니다.
console.log(element.getBoundingClientRect().height);
출력:
60
따라서getBoundingClientRect()메소드에 의해 반환 된 객체에서 요소의 높이를 가져 오려면height키를 사용하여 높이를 가져와야합니다. 여기에서 요소 높이는50px, 패딩은8px, 테두리 너비는2px입니다. 따라서이 함수는 총60px높이를 반환합니다.
