OffsetHeight, clientHeight, scrollHeight nedir?

Arasındaki fark ne olduğunun anlatılmasının Düşünce offsetHeight, clientHeightve scrollHeightya offsetWidth, clientWidthve scrollWidth?

Müşteri tarafında çalışmadan önce bu farkı bilmek gerekir. Aksi takdirde, yaşamlarının yarısı UI'yi düzeltmek için harcanacaktır.

Keman veya satır içi:

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>

Farkı bilmek için kutu modelini anlamanız gerekir , ancak temel olarak:

clientHeight :

dolgu dahil , yatay kaydırma çubuğu yüksekliği , kenarlık veya kenar boşluğu dahil değil , bir öğenin piksel olarak iç yüksekliğini döndürür

ofsetHeight :

öğe kenarlıkları , öğe dikey dolgusu, öğe yatay kaydırma çubuğu (varsa, oluşturulmuşsa) ve öğe CSS yüksekliğini içeren bir ölçümdür .

scrollHeight :

Bir elemanın içeriği yüksekliğinin bir ölçüsüdür içeren içerik görünür değildir ekranda taşma nedeniyle

Bunu kolaylaştıracağım:

Düşünmek:

<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 : Elemanın _{yüksekliğine rağmen tüm içeriğin +} dolguların ENTIRE content & padding (visible or not)
_{yüksekliği.}

clientHeight : VISIBLE content & padding
_{Yalnızca görünür yükseklik: öğenin açıkça tanımlanmış yüksekliği ile sınırlı içerik bölümü.}

offsetHeight : Belgedeki VISIBLE content & padding + border + scrollbar
_{eleman tarafından işgal edilen yükseklik.}

* offsetHeight , kenarlık, dolgu ve öğenin yatay kaydırma çubuğu dahil olmak üzere öğenin CSS yüksekliğinin piksel cinsinden bir ölçümüdür .

* clientHeight özelliği, bir öğenin dolgu dahil piksel cinsinden görüntülenebilir yüksekliğini döndürür ancak kenarlık, kaydırma çubuğu veya kenar boşluğunu döndürmez .

* scrollHeight değeri, dikey bir kaydırma çubuğu kullanmadan görünüm içeriğindeki tüm içeriği sığdırmak için öğenin gerektirdiği minimum yüksekliğe eşittir . Yükseklik clientHeight ile aynı şekilde ölçülür: elemanın dolgusunu içerir, ancak kenarlığını, kenar boşluğunu veya yatay kaydırma çubuğunu içermez.

Yükseklik yerine genişlikli olanların tümü için de durum aynıdır.

Bu üçle ilgili açıklamalarım:

• offsetHeight : Ebeveynin "göreli konumlandırma" alanının ne kadarı öğe tarafından ele geçirildiğini. (ör. öğenin position: absolutetorunlarını yok sayar )
• clientHeight : Öğenin kendi kenarlığını, kenar boşluğunu ve yatay kaydırma çubuğunun yüksekliğini (varsa) hariç tutması dışında ofset yüksekliği ile aynı.
• scrollHeight : Öğenin tüm içeriğini / kökenlerini ( position: absoluteolanlar da dahil olmak üzere) kaydırma yapmadan görmek için ne kadar alan gerekir .

Sonra da var:

• getBoundingClientRect (). height : Öğenin css dönüşümleri uygulandıktan sonra hesaplanması dışında scrollHeight ile aynı .

Ofset "Bir şeyin çizginin dışına çıktığı miktar veya mesafe" anlamına gelir. Kenar Boşluğu veya Kenarlıklar, bir HTML öğesinin gerçek yüksekliğini veya genişliğini "çizgi dışı" yapan bir şeydir. Bunu hatırlamanıza yardımcı olacaktır:

• offsetHeight , kenarlık, dolgu ve öğenin yatay kaydırma çubuğu dahil olmak üzere öğenin CSS yüksekliğinin piksel cinsinden bir ölçümüdür.

Öte yandan, clientHeight, OffsetHeight'ın tam tersini söyleyebileceğiniz bir şeydir. Sınır veya kenar boşlukları içermez. Dolguyu içerir, çünkü HTML kabının içinde bulunan bir şeydir, bu nedenle kenar boşluğu veya kenarlık gibi ekstra ölçümler olarak sayılmaz. Yani :

• clientHeight özelliği, bir öğenin dolgu, kenarlık, kaydırma çubuğu veya kenar boşluğu dahil piksel cinsinden görüntülenebilir yüksekliğini döndürür.

ScrollHeight tüm kaydırılabilir alanlardır, bu nedenle kaydırma işleminiz hiçbir zaman kenar boşluğunuz veya kenarlığınızın üzerinden geçmez, bu nedenle scrollHeight kenar boşluğu veya kenarlıklar içermez, ancak dolgu doldurur. Yani:

• scrollHeight değeri, dikey bir kaydırma çubuğu kullanmadan görünüm içeriğindeki tüm içeriği sığdırmak için öğenin gerektirdiği minimum yüksekliğe eşittir. Yükseklik clientHeight ile aynı şekilde ölçülür: elemanın dolgusunu içerir, ancak kenarlığını, kenar boşluğunu veya yatay kaydırma çubuğunu içermez.