Apa itu offsetHeight, clientHeight, scrollHeight?

Pemikiran menjelaskan apa perbedaan antara offsetHeight, clientHeightdan scrollHeightatau offsetWidth, clientWidthdan scrollWidth?

Seseorang harus mengetahui perbedaan ini sebelum bekerja di sisi klien. Kalau tidak setengah dari hidup mereka akan dihabiskan untuk memperbaiki UI.

Biola , atau sebaris di bawah:

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>

Untuk mengetahui perbedaannya, Anda harus memahami model kotak , tetapi pada dasarnya:

clientHeight :

mengembalikan ketinggian bagian dalam elemen dalam piksel, termasuk padding tetapi tidak tinggi scrollbar horizontal , perbatasan , atau margin

offsetHeight :

adalah pengukuran yang mencakup batas elemen , padding elemen vertikal, bilah gulir elemen horizontal (jika ada, jika ditampilkan) dan tinggi elemen CSS.

scrollTinggi :

adalah pengukuran ketinggian konten elemen termasuk konten yang tidak terlihat di layar karena meluap

Saya akan membuatnya lebih mudah:

Mempertimbangkan:

<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 : ENTIRE content & padding (visible or not)
_{Tinggi semua konten + bantalan, meskipun tinggi elemen.}

clientHeight : VISIBLE content & padding
_{Hanya ketinggian yang terlihat: bagian konten dibatasi oleh ketinggian elemen yang ditentukan secara eksplisit.}

offsetHeight : VISIBLE content & padding + border + scrollbar
_{Tinggi ditempati oleh elemen pada dokumen.}

* offsetHeight adalah pengukuran dalam piksel tinggi elemen CSS, termasuk border, padding, dan scrollbar horizontal elemen.

* properti clientHeight mengembalikan ketinggian elemen yang terlihat dalam piksel, termasuk padding, tetapi bukan batas, scrollbar, atau margin.

* Nilai scrollHeight sama dengan tinggi minimum elemen yang diperlukan untuk menyesuaikan semua konten di viewport tanpa menggunakan scrollbar vertikal. Ketinggian diukur dengan cara yang sama seperti clientHeight: ini termasuk padding elemen, tetapi tidak pada border, margin atau scrollbar horizontal.

Sama halnya dengan semua ini dengan lebar bukan tinggi.

Deskripsi saya untuk ketiganya:

• offsetHeight : Berapa banyak ruang "posisi relatif" induk diambil oleh elemen. (mis. itu mengabaikan position: absoluteketurunan elemen )
• clientHeight : Sama seperti offset-height, kecuali itu tidak termasuk batas elemen sendiri, margin, dan ketinggian scroll-bar horizontal (jika memiliki satu).
• scrollHeight : Berapa banyak ruang yang dibutuhkan untuk melihat semua konten elemen / keturunan (termasuk position: absoluteyang) tanpa menggulir.

Lalu ada juga:

• getBoundingClientRect (). height : Sama seperti scrollHeight, kecuali itu dihitung setelah transformasi css elemen diterapkan .

Offset Berarti "jumlah atau jarak di mana sesuatu berada di luar garis". Margin atau Borders adalah sesuatu yang membuat tinggi atau lebar elemen HTML yang sebenarnya "out of line". Ini akan membantu Anda untuk mengingat bahwa:

• offsetHeight adalah pengukuran dalam piksel tinggi elemen CSS, termasuk border, padding, dan scrollbar horizontal elemen.

Di sisi lain, clientHeight adalah sesuatu yang bisa Anda katakan bertolak belakang dengan OffsetHeight. Itu tidak termasuk perbatasan atau margin. Itu tidak termasuk padding karena itu adalah sesuatu yang berada di dalam wadah HTML, sehingga tidak dihitung sebagai pengukuran tambahan seperti margin atau perbatasan. Jadi:

• Properti clientHeight mengembalikan ketinggian elemen yang dapat dilihat dalam piksel, termasuk padding, tetapi tidak pada batas, scrollbar, atau margin.

ScrollHeight adalah semua area yang dapat digulir, sehingga gulir Anda tidak akan pernah melewati margin atau batas Anda, jadi itulah sebabnya scrollHeight tidak termasuk margin atau batas tapi ya padding tidak. Begitu:

• Nilai scrollHeight sama dengan tinggi minimum elemen yang diperlukan untuk menyesuaikan semua konten di viewport tanpa menggunakan scrollbar vertikal. Ketinggian diukur dengan cara yang sama seperti clientHeight: ini termasuk padding elemen, tetapi tidak pada border, margin atau scrollbar horizontal.