offsetHeight와 clientHeight의 차이점
javascript dom에서-요소의 offsetHeight와 clientHeight의 차이점은 무엇입니까?
객체의 가시 영역 높이를 픽셀 단위로 반환합니다. 값에는 패딩이있는 높이가 포함되지만 scrollBar, 테두리 및 여백은 포함되지 않습니다.
객체의 가시 영역 높이를 픽셀 단위로 반환합니다. 값에는 패딩, scrollBar 및 테두리가있는 높이가 포함되지만 여백은 포함되지 않습니다.
따라서 offsetHeight스크롤 막대와 테두리는 포함 clientHeight하지 않습니다.
Oded의 대답은 이론입니다. 그러나 이론과 실제가 항상 동일하지는 않습니다. 적어도 자바 스크립트에서 스크롤 작업에 중요 할 수있는 <BODY> 또는 <HTML> 요소는 아닙니다.
Microsoft는 MSDN에 멋진 이미지를 가지고 있습니다.
세로 스크롤 막대를 표시하는 HTML 페이지가있는 경우이 이미지에서 볼 수 있듯이 <BODY> 또는 <HTML> 요소에 OffsetHeight보다 ScrollHeight 게터가있을 것으로 예상됩니다. 모든 이전 버전의 Internet Explorer에 해당됩니다.
그러나 Internet Explorer 11 및 Firefox 36에는 해당되지 않습니다. 최소한 이러한 브라우저에서는 OffsetHeight가 ScrollHeight와 거의 동일합니다.
OffsetHeight가 잘못되었을 수 있지만 ClientHeight는 항상 정확합니다.
다른 브라우저에서 다음 코드를 시도하면 표시됩니다.
<!DOCTYPE html>
<html>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script>
document.write("Body off: " + document.body.offsetHeight
+ "<br>Body cli: " + document.body.clientHeight
+ "<br>Html off: " + document.body.parentElement.offsetHeight
+ "<br>Html cli: " + document.body.parentElement.clientHeight);
</script>
</body>
</html>
이전 Internet Explorer가 올바르게 표시되는 동안 :
Body off: 1197
Body cli: 1197
Html off: 878
Html cli: 874
Firefox 및 Internet Explorer 11의 출력은 다음과 같습니다.
Body off: 1260
Body cli: 1260
Html off: 1276 // this is completely wrong
Html cli: 889
여기서 offsetHeight가 잘못되었음을 분명히 보여줍니다. OffsetHeight와 ClientHeight는 몇 픽셀 만 다르거 나 같아야합니다.
ClientHeight 및 OffsetHeight는 예를 들어 <FORM>과 같이 보이지 않는 요소의 경우 매우 다를 수 있습니다. 여기서 OffsetHeight는 FORM의 실제 크기 일 수 있지만 ClientHeight는 0 일 수 있습니다.
참고 URL : https://stackoverflow.com/questions/4106538/difference-between-offsetheight-and-clientheight
'programing tip' 카테고리의 다른 글
| CodeDom 공급자 유형“Microsoft.CodeDom.Providers.DotNetCompilerPlatform.CSharpCodeProvider”를 찾을 수 없습니다 (0) | 2020.06.21 |
|---|---|
| Javascript에서 작은 따옴표와 큰 따옴표의 차이점 (0) | 2020.06.21 |
| Flask의 컨텍스트 스택의 목적은 무엇입니까? (0) | 2020.06.21 |
| 루비와 함께 존재하지 않는 디렉토리 만들기 (0) | 2020.06.20 |
| $ (this)와 event.target의 차이점은 무엇입니까? (0) | 2020.06.20 |