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높이를 반환합니다.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn