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

154

В javascript dom - в чем разница между offsetHeight и clientHeight элемента?

javascript

— Стив
источник

Вот хороший демо-пример: jsfiddle.net/shibualexis/yVhgM/3

— GibboK

Ответы:

203

clientHeight :

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

offsetHeight :

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

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

— Одед
источник

Еще я заметил, что clientHeight намного быстрее, чем offsetHeight. У тебя есть идеи почему?

— disc0dancer

@ disc0dancer - Возможно, потому что браузер уже имеет clientSizeлегкодоступный (в конце концов, это окно просмотра), но нужно рассчитать offsetHeightпосле переформатирования всего документа?

— Одед

Что ж, инспектор webkit говорит, что перекомпоновки также относятся ко всему документу, даже когда он запрашивает clientHeigh.

— disc0dancer

@ disc0dancer - Так много для моего предположения. Но это вещь реализации - не уверен, что все браузеры такие.

— Одед

Ответ от Одеда - теория. Но теория и реальность не всегда одинаковы, по крайней мере, не для элементов <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
источник