разница между offsetHeight и clientHeight

Ответы:

203

clientHeight :

Возвращает высоту видимой области для объекта в пикселях. Значение содержит высоту с отступом, но не включает scrollBar, border и margin.

offsetHeight :

Возвращает высоту видимой области для объекта в пикселях. Значение содержит высоту с отступом, полосой прокрутки и границей, но не включает поле.

Таким образом, offsetHeightвключает в себя полосу прокрутки и границы, clientHeightне.

Одед
источник
3
Еще я заметил, что clientHeight намного быстрее, чем offsetHeight. У тебя есть идеи почему?
disc0dancer
2
@ disc0dancer - Возможно, потому что браузер уже имеет clientSizeлегкодоступный (в конце концов, это окно просмотра), но нужно рассчитать offsetHeightпосле переформатирования всего документа?
Одед
Что ж, инспектор webkit говорит, что перекомпоновки также относятся ко всему документу, даже когда он запрашивает clientHeigh.
disc0dancer
2
@ disc0dancer - Так много для моего предположения. Но это вещь реализации - не уверен, что все браузеры такие.
Одед
83

Ответ от Одеда - теория. Но теория и реальность не всегда одинаковы, по крайней мере, не для элементов <BODY> или <HTML>, которые могут быть важны для операций прокрутки в javascript.

У Microsoft есть хороший образ в MSDN :

ClientHeight, OffsetHeight, ScrollHeight

Если у вас есть HTML-страница, на которой показана вертикальная полоса прокрутки, можно ожидать, что элемент <BODY> или <HTML> имеет элемент ScrollHeight, а не OffsetHeight, как показано на этом изображении. Это верно для всех старых версий 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 может быть нулевым.

Elmue
источник