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

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

Ответ 1

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

offsetHeight:

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

Итак, offsetHeight включает полосу прокрутки и границу, clientHeight не делает.

Ответ 2

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

Microsoft имеет хорошее изображение в MSDN:

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