javascript - offsetHeight, clientHeight, scrollHeight nedir?

offsetHeight, clientHeight ve scrollHeight ile offsetWidth, clientWidth ve scrollWidth arasındaki farkı açıklamayı düşündünüz mü?

İstemci tarafında çalışmadan önce bu farkı bilmek gerekir. Aksi takdirde hayatlarının yarısı kullanıcı arayüzünü düzeltmekle geçecektir.

Fiddle veya aşağıda 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>

Cevap #1

Farkı bilmek için kutu modelini anlamalısınız, ama temelde:

istemciYüksekliği:

bir öğenin iç yüksekliğini pikseller cinsinden döndürür, dolgu dahil ancak yatay kaydırma çubuğu yüksekliği, kenarlık veya marj dahil değildir

offsetHeight:

elemanın kenarlarını, elemanın dikey dolgusunu, elemanın yatay kaydırma çubuğunu (mevcutsa, render edildiyse) ve elemanın CSS yüksekliğini içeren bir ölçümdür.

kaydırmaYüksekliği:

Bir öğenin içeriğinin yüksekliğinin ölçüsüdür taşma nedeniyle ekranda görünmeyen içeriği de dahil

Bunu kolaylaştıracağım:

Düşünün:

<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: TÜM içerik ve dolgu (görünür olup olmadığına bakılmaksızın)
Öğe yüksekliğine bakılmaksızın tüm içerik ve dolguların yüksekliği.

clientHeight: GÖRÜNÜRLÜK içeriği & padding
Sadece görünür yükseklik: öğenin açıkça tanımlanmış yüksekliği ile sınırlı içerik kısmı.

offsetHeight: GÖRÜNÜR içerik & dolgu + kenarlık + kaydırma çubuğu
Belge üzerinde öğenin kapladığı yükseklik.

Cevap #2

* offsetHeight, öğenin CSS yüksekliğinin piksel cinsinden ölçüsüdür, kenarlık, dolgu ve öğenin yatay kaydırma çubuğunu da içerir.

* clientHeight özelliği, bir öğenin görüntülenebilir yüksekliğini piksel cinsinden döndürür, padding dahil, ancak border, kaydırma çubuğu veya margin dahil değildir.

* scrollHeight değeri, dikey kaydırma çubuğu kullanmadan öğenin tüm içeriği görüntüleme alanına sığdırabilmesi için gerekli minimum yüksekliğe eşittir. Yükseklik, clientHeight ile aynı şekilde ölçülür: öğenin dolgusunu (padding) içerir, ancak kenarlık (border), margin veya yatay kaydırma çubuğunu içermez.

Yükseklik yerine genişlik için de tüm bunlarda durum aynıdır.

Cevap #3

Üçü için açıklamalarım:

  • offsetHeight: Elementin, ebeveynin "relative positioning" alanının ne kadarını kapladığını gösterir. (yani, elementin position: absolute alt öğeleri göz ardı edilir)
  • clientHeight: offset-height ile aynıdır, ancak elemanın kendi kenarlığını, boşluğunu ve yatay kaydırma çubuğunun yüksekliğini (varsa) içermez.
  • scrollHeight: Kaydırma yapmadan bir öğenin tüm içeriğini/alt öğelerini ( position: absolute olanlar dahil) görmek için ne kadar alana ihtiyaç olduğunu belirtir.

Sonra ayrıca şunlar da var:

  • getBoundingClientRect().height: scrollHeight ile aynıdır, ancak elementin CSS dönüşümleri uygulandıktan sonra hesaplanır.

İlgili makaleler