جاوااسکریپت - تفاوت بین offsetHeight و clientHeight

در جاوااسکریپت DOM - تفاوت بین offsetHeight و clientHeight یک عنصر چیست؟

پاسخ شماره ۱

ارتفاع_مشتری:

ارتفاع ناحیه قابل مشاهده یک شیء را بر حسب پیکسل برمیگرداند. این مقدار شامل ارتفاع همراه با Padding است، اما شامل ScrollBar، Border و Margin نمیشود.

ارتفاع جابجاشده:

ارتفاع ناحیه قابل مشاهده برای یک شیء را بر حسب پیکسل برمیگرداند. این مقدار شامل ارتفاع همراه با حاشیه داخلی، نوار اسکرول و مرز است، اما شامل حاشیه بیرونی نمیشود.

بنابراین، offsetHeight شامل نوار اسکرول و حاشیه است، اما clientHeight اینطور نیست.

پاسخ شماره ۲

پاسخ اودد نظریه است. اما نظریه و واقعیت همیشه یکسان نیستند، حداقل برای عناصر <BODY> یا <HTML> که ممکن است برای عملیات پیمایش در جاوااسکریپت مهم باشند، اینطور نیست.

مایکروسافت یک تصویر خوب در MSDN دارد:

اگر شما یک صفحه HTML دارید که نوار پیمایش عمودی را نشان میدهد، انتظار میرود که یا عنصر <BODY> یا عنصر <HTML> ارتفاع پیمایشی (ScrollHeight) بیشتری نسبت به ارتفاع واقعی (OffsetHeight) داشته باشد همانطور که این تصویر نشان میدهد. این موضوع برای تمام نسخههای قدیمیتر اینترنت اکسپلورر صادق است.

اما این برای اینترنت اکسپلورر 11 و فایرفاکس 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>

در حالی که اینترنت اکسپلوررهای قدیمی به درستی نمایش میدهند:

Body off: 1197
Body cli: 1197
Html off: 878
Html cli: 874  

خروجی از فایرفاکس و اینترنت اکسپلورر ۱۱ عبارت است از:

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 ممکن است صفر باشد.