Computer >> 컴퓨터 >  >> 프로그램 작성 >> CSS

CSS의 clientHeight, offsetHeight 및 scrollHeight 속성 이해

<시간/>

클라이언트 높이

clientHeight는 패딩을 포함한 요소의 높이를 측정합니다. 테두리, 여백 및 스크롤바 높이(재작성된 경우)는 여기에 포함되지 않습니다.

오프셋 높이

offsetHeight는 수직 패딩, 상단 및 하단 테두리를 포함하는 요소의 높이 측정값을 제공합니다. 여백은 여기에 포함되지 않습니다.

스크롤 높이

scrollHeight는 세로 패딩과 오버플로 속성으로 인해 화면에 표시되지 않는 콘텐츠를 포함하는 요소의 높이를 측정합니다.

다음 예는 clientHeight, offsetHeight 및 scrollHeight를 보여줍니다.

예(clientHeight)

<!DOCTYPE html>
<html>
<head>
<style>
#parent {
   margin-top: 10px;
   height: 200px;
   width: 200px;
   overflow: auto;
   margin: 20px;
}
#demo {
   height: 250px;
   padding: 20px;
   background-color: beige;
   border: 2px ridge red;
}
</style>
</head>
<body>
<button onclick="getHeight()">Get Client Height</button>
<div id="parent">
<div id="demo">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</div>
<article id="display"></article>
<script>
function getHeight() {
   let myItem = document.getElementById("demo");
   let y = myItem.clientHeight;
   document.getElementById ("display").innerHTML = "Client Height is " + y + "px";
}
</script>
</body>
</html>

출력

이것은 다음 결과를 생성합니다 -

CSS의 clientHeight, offsetHeight 및 scrollHeight 속성 이해

예(offsetHeight)

<!DOCTYPE html>
<html>
<head>
<style>
#parent {
   height: 180px;
   width: 180px;
   overflow: auto;
   margin: 20px;
}
#demo {
   height: 220px;
   padding: 20px;
   background-color: cornflowerblue;
   border: 10px ridge red;
   color: white;
}
</style>
</head>
<body>
<button onclick="getHeight()">Get Offset Height</button>
<div id="parent">
<div id="demo">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</div>
<article id="display"></article>
<script>
function getHeight() {
   let myItem = document.getElementById("demo");
   let y = myItem.offsetHeight;
   document.getElementById ("display").innerHTML = "Offset Height is " + y + "px";
}
</script>
</body>
</html>

출력

이것은 다음 결과를 생성합니다 -

CSS의 clientHeight, offsetHeight 및 scrollHeight 속성 이해

예(scrollHeight)

<!DOCTYPE html>
<html>
<head>
<style>
#parent {
   margin-top: 10px;
   height: 200px;
   width: 200px;
   overflow: auto;
   margin: 20px;
}
#demo {
   height: 400px;
   padding: 20px;
   background-color: bisque;
   border: 1px solid green;
}
</style>
</head>
<body>
<button onclick="getHeight()">Get Scroll Height</button>
<div id="parent">
<div id="demo">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<article id="display"></article>
<script>
function getHeight() {
   let myItem = document.getElementById("demo");
   let y = myItem.scrollHeight;
   document.getElementById ("display").innerHTML = "Scroll Height is " + y + "px";
}
</script>
</body>
</html>

출력

이것은 다음 결과를 생성합니다 -

CSS의 clientHeight, offsetHeight 및 scrollHeight 속성 이해