อะไรคือ offsetHeight, clientHeight, scrollHeight?

ความคิดของการอธิบายสิ่งที่เป็นความแตกต่างระหว่างoffsetHeight, clientHeightและscrollHeightหรือoffsetWidth, clientWidthและscrollWidth?

เราจะต้องรู้ความแตกต่างนี้ก่อนที่จะทำงานกับฝั่งลูกค้า มิฉะนั้นครึ่งหนึ่งของชีวิตของพวกเขาจะถูกใช้ในการแก้ไข UI

ซอหรืออินไลน์ด้านล่าง:

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>

หากต้องการทราบความแตกต่างคุณต้องเข้าใจรูปแบบกล่องแต่โดยพื้นฐานแล้ว:

ความสูงของลูกค้า :

ผลตอบแทนที่สูงภายในขององค์ประกอบพิกเซลรวมทั้งการขยาย แต่ไม่แนวนอนสูงเลื่อน , ชายแดนหรือขอบ

ชดเชยความสูง :

เป็นการวัดซึ่งรวมถึงเส้นขอบองค์ประกอบ, การเติมแนวตั้งองค์ประกอบ, แถบเลื่อนแนวนอนองค์ประกอบ(ถ้ามี, หากเรนเดอร์) และความสูง 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 : ENTIRE content & padding (visible or not)
_{ความสูงของเนื้อหาทั้งหมด + ช่องว่างภายในแม้จะมีความสูงขององค์ประกอบ}

clientHeight : VISIBLE content & padding
_{ความสูงที่มองเห็นได้เท่านั้น: ส่วนเนื้อหาถูก จำกัด โดยความสูงที่กำหนดอย่างชัดเจนขององค์ประกอบ}

offsetHeight : VISIBLE content & padding + border + scrollbar
_{ความสูงที่ถูกครอบครองโดยองค์ประกอบบนเอกสาร}

* offsetHeightเป็นการวัดพิกเซลของความสูง CSS ขององค์ประกอบรวมถึงเส้นขอบช่องว่างภายในและแถบเลื่อนแนวนอนขององค์ประกอบ

*คุณสมบัติclientHeightส่งคืนความสูงที่สามารถดูได้ขององค์ประกอบเป็นพิกเซลรวมถึงการขยาย แต่ไม่ใช่เส้นขอบแถบเลื่อนหรือระยะขอบ

*ค่าscrollHeightเท่ากับความสูงต่ำสุดที่องค์ประกอบต้องการเพื่อให้พอดีกับเนื้อหาทั้งหมดในวิวพอร์ตโดยไม่ต้องใช้แถบเลื่อนแนวตั้ง ความสูงถูกวัดในลักษณะเดียวกับ clientHeight: มันรวมถึงช่องว่างภายในขององค์ประกอบ แต่ไม่ใช่เส้นขอบระยะขอบหรือแถบเลื่อนแนวนอน

กรณีเดียวกันทั้งหมดนี้มีความกว้างแทนความสูง

คำอธิบายของฉันสำหรับสาม:

• offsetHeight : องค์ประกอบ "พื้นที่การวางตำแหน่งแบบสัมพันธ์" ของผู้ปกครองนั้นถ่าย (เช่นมันจะไม่สนใจposition: absoluteลูกหลานขององค์ประกอบ)
• clientHeight : เช่นเดียวกับ offset-height ยกเว้นมันจะแยกขอบเขตของตัวเองส่วนต่างและความสูงของแถบเลื่อนแนวนอน (ถ้ามี)
• scrollHeight : ต้องการพื้นที่เท่าใดในการดูเนื้อหา / ลูกหลานขององค์ประกอบทั้งหมด (รวมถึงองค์ประกอบposition: absolute) โดยไม่ต้องเลื่อน

จากนั้นยังมี:

• ความสูง getBoundingClientRect (). : เหมือนกับ scrollHeight ยกเว้นว่ามันคำนวณหลังจากองค์ประกอบของการแปลง css ที่ถูกนำมาใช้

Offsetหมายถึง "จำนวนหรือระยะทางที่บางสิ่งอยู่นอกเส้น" ระยะขอบหรือเส้นขอบเป็นสิ่งที่ทำให้ความสูงหรือความกว้างจริงขององค์ประกอบ HTML "ไม่อยู่ในบรรทัด" มันจะช่วยให้คุณจำได้ว่า:

• offsetHeightเป็นการวัดพิกเซลของความสูง CSS ขององค์ประกอบรวมถึงเส้นขอบช่องว่างภายในและแถบเลื่อนแนวนอนขององค์ประกอบ

ในทางตรงกันข้ามลูกค้าความสูงคือสิ่งที่คุณสามารถพูดตรงข้ามกับ OffsetHeight ไม่รวมถึงเส้นขอบหรือระยะขอบ มันรวมถึงช่องว่างภายในเนื่องจากเป็นสิ่งที่อยู่ภายในคอนเทนเนอร์ HTML ดังนั้นจึงไม่นับเป็นการวัดพิเศษเช่นระยะขอบหรือเส้นขอบ ดังนั้น:

• คุณสมบัติclientHeightส่งคืนความสูงที่สามารถดูได้ขององค์ประกอบเป็นพิกเซลรวมถึงการขยาย แต่ไม่ใช่เส้นขอบแถบเลื่อนหรือระยะขอบ

ScrollHeight เป็นพื้นที่ที่เลื่อนได้ทั้งหมดดังนั้นการเลื่อนของคุณจะไม่วิ่งข้ามขอบหรือขอบของคุณดังนั้น ScrollHeight จึงไม่รวมระยะขอบหรือเส้นขอบ แต่การขยายใช่ ดังนั้น:

• ค่าscrollHeightเท่ากับความสูงต่ำสุดที่องค์ประกอบต้องการเพื่อให้พอดีกับเนื้อหาทั้งหมดในวิวพอร์ตโดยไม่ต้องใช้แถบเลื่อนแนวตั้ง ความสูงถูกวัดในลักษณะเดียวกับ clientHeight: มันรวมถึงช่องว่างภายในขององค์ประกอบ แต่ไม่ใช่เส้นขอบระยะขอบหรือแถบเลื่อนแนวนอน