різниця між offsetHeight та clientHeight

154

У домі Java - яка різниця між offsetHeight та clientHeight елемента?

javascript

— steve
джерело

Ось хороший демонстраційний приклад jsfiddle.net/shibualexis/yVhgM/3

— GibboK

Відповіді:

203

висота клієнта :

Повертає висоту видимої області для об’єкта, у пікселях. Значення містить висоту з прокладкою, але воно не включає смугу прокрутки, рамку та поле.

зсув Висота :

Повертає висоту видимої області для об’єкта, у пікселях. Значення містить висоту з прокладкою, прокруткоюБар та облямівкою, але не включає поле.

Отже, offsetHeightвключає смугу прокрутки та рамку, clientHeightне відповідає.

— Одіє
джерело

Ще одна річ, яку я помітив, це те, що clientHeight набагато швидше, ніж offsetHeight. У вас є ідеї, чому?

— disk0dancer

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

— Одід

Добре, інспектор веб-сайту говорить, що поповнення є також у всьому документі, навіть коли просять клієнтаHeigh.

— disk0dancer

@ disk0dancer - Стільки, на мою здогадку. Але це річ впровадження - не впевнений, що всі браузери такі.

— Одід

Відповідь від Одеда - це теорія. Але теорія та реальність не завжди однакові, принаймні, не для елементів <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 може бути реальним розміром ФОРМИ, а ClientHeight може бути нульовим.

— Elmue
джерело