جاوااسکریپت - offsetHeight، clientHeight و scrollHeight چیستند؟

فکر میکنید توضیح بدهید تفاوت بین offsetHeight، clientHeight و scrollHeight یا offsetWidth، clientWidth و scrollWidth چیست؟

قبل از کار بر روی سمت کاربر، باید این تفاوت را بدانید. در غیر این صورت، نیمی از زندگی خود را صرف اصلاح رابط کاربری خواهید کرد.

Fiddle، یا به صورت درونخطی در زیر:

function whatis(propType) {
  var mainDiv = document.getElementById("MainDIV");
  if (window.sampleDiv == null) {
    var div = document.createElement("div");
    window.sampleDiv = div;
  }
  div = window.sampleDiv;
  var propTypeWidth = propType.toLowerCase() + "Width";
  var propTypeHeight = propType + "Height";

  var computedStyle = window.getComputedStyle(mainDiv, null);
  var borderLeftWidth = computedStyle.getPropertyValue("border-left-width");
  var borderTopWidth = computedStyle.getPropertyValue("border-top-width");

  div.style.position = "absolute";
  div.style.left = mainDiv.offsetLeft + Math.round(parseFloat((propType == "client") ? borderLeftWidth : 0)) + "px";
  div.style.top = mainDiv.offsetTop + Math.round(parseFloat((propType == "client") ? borderTopWidth : 0)) + "px";
  div.style.height = mainDiv[propTypeHeight] + "px";
  div.style.lineHeight = mainDiv[propTypeHeight] + "px";
  div.style.width = mainDiv[propTypeWidth] + "px";
  div.style.textAlign = "center";
  div.innerHTML = propTypeWidth + " X " + propTypeHeight + "( " +
    mainDiv[propTypeWidth] + " x " + mainDiv[propTypeHeight] + " )";



  div.style.background = "rgba(0,0,255,0.5)";
  document.body.appendChild(div);

}
document.getElementById("offset").onclick = function() {
  whatis('offset');
}
document.getElementById("client").onclick = function() {
  whatis('client');
}
document.getElementById("scroll").onclick = function() {
  whatis('scroll');
}

#MainDIV {
  border: 5px solid red;
}

<button id="offset">offsetHeight & offsetWidth</button>
<button id="client">clientHeight & clientWidth</button>
<button id="scroll">scrollHeight & scrollWidth</button>

<div id="MainDIV" style="margin:auto; height:200px; width:400px; overflow:auto;">
  <div style="height:400px; width:500px; overflow:hidden;">

  </div>
</div>

پاسخ شماره ۱

برای دانستن تفاوت، باید مدل جعبهای را درک کنید، اما به طور کلی:

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

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

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

یک اندازهگیری است که شامل عنصر حاشیهها، فاصلهی عمودی عنصر، نوار پیمایش افقی عنصر (در صورت وجود، در صورت رندر شدن) و ارتفاع CSS عنصر میشود.

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

اندازهگیری ارتفاع محتوای یک عنصر است شامل محتوایی که به دلیل سرریز روی صفحه قابل مشاهده نیست

من این را آسانتر میکنم:

در نظر بگیرید:

<element>                                     
    <!-- *content*: child nodes: -->        | content
    A child node as text node               | of
    <div id="another_child_node"></div>     | the
    ... and I am the 4th child node         | element
</element>                                    

scrollHeight: تمام محتوا و فاصله داخلی (قابل مشاهده یا نه)
_{ارتفاع تمام محتوا + فاصلههای داخلی، بدون توجه به ارتفاع عنصر.}

clientHeight: محتوای قابل مشاهده و padding
_{تنها ارتفاع قابل مشاهده: بخش محتوا محدود به ارتفاع مشخصشده عنصر.}

ارتفاع جابجایی: محتوای قابل مشاهده & padding + حاشیه + نوار پیمایش
_{ارتفاع اشغال شده توسط عنصر در سند.}

پاسخ شماره ۲

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

خصوصیت * clientHeight ارتفاع قابل مشاهده یک عنصر را به پیکسل برمیگرداند، شامل padding، اما شامل border، scrollbar یا margin نمیشود.

مقدار * scrollHeight برابر با حداقل ارتفاعی است که عنصر برای جای دادن تمام محتوا در نمای قابل مشاهده نیاز دارد بدون استفاده از نوار پیمایش عمودی. ارتفاع به همان روشی که clientHeight اندازهگیری میشود سنجیده میشود: شامل padding عنصر است، اما شامل border، margin یا نوار پیمایش افقی نمیشود.

همین وضعیت برای همه اینها با عرض به جای ارتفاع صادق است.

پاسخ شماره ۳

توصیفهای من برای هر سه:

• offsetHeight: چه مقدار از فضای «موقعیتیابی نسبی» والد توسط عنصر اشغال شده است. (یعنی فرزندان عنصر با position: absolute نادیده گرفته میشوند)
• clientHeight: مشابه offsetHeight است، با این تفاوت که حاشیه، مرز خود عنصر و ارتفاع نوار اسکرول افقی آن را (اگر داشته باشد) شامل نمیشود.
• scrollHeight: چه مقدار فضا برای دیدن تمام محتوای عنصر/فرزندان آن (شامل مواردی با position: absolute) بدون نیاز به اسکرول لازم است.

سپس همچنین وجود دارد:

• getBoundingClientRect().height: مشابه scrollHeight است، با این تفاوت که پس از اعمال تغییرات CSS عنصر محاسبه میشود.