offsetHeight와 clientHeight의 차이점

154

javascript dom에서-요소의 offsetHeight와 clientHeight의 차이점은 무엇입니까?

javascript

— 스티브
소스

다음은 좋은 데모 예제입니다. jsfiddle.net/shibualexis/yVhgM/3

— GibboK

답변:

203

clientHeight :

객체의 가시 영역 높이를 픽셀 단위로 반환합니다. 값에는 패딩이있는 높이가 포함되지만 scrollBar, 테두리 및 여백은 포함되지 않습니다.

offsetHeight :

객체의 가시 영역 높이를 픽셀 단위로 반환합니다. 값에는 패딩, scrollBar 및 테두리가있는 높이가 포함되지만 여백은 포함되지 않습니다.

따라서 offsetHeight스크롤 막대와 테두리는 포함 clientHeight하지 않습니다.

— 오데드
소스

또 다른 사실은 clientHeight가 offsetHeight보다 훨씬 빠르다는 것입니다. 왜 그런지 아십니까?

— disc0dancer

@ disc0dancer-아마도 브라우저가 이미 clientSize쉽게 사용할 수 있기 때문에 (결국 뷰포트이므로) offsetHeight전체 문서를 리플 로우 한 후에 계산해야 합니까?

— Oded

웹킷 관리자는 clientHeigh를 요청할 때도 리플 로우가 전체 문서에 있다고 말합니다.

— disc0dancer 2016

@ disc0dancer-내 추측에 너무 많이. 그러나 이것은 구현 일입니다-모든 브라우저가 그런지 확실하지는 않습니다.

— Oded

Oded의 대답은 이론입니다. 그러나 이론과 실제가 항상 동일하지는 않습니다. 적어도 자바 스크립트에서 스크롤 작업에 중요 할 수있는 <BODY> 또는 <HTML> 요소는 아닙니다.

Microsoft는 MSDN에 멋진 이미지를 가지고 있습니다 .

ClientHeight, OffsetHeight, ScrollHeight

세로 스크롤 막대를 표시하는 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 일 수 있습니다.

— 엘무에
소스