Was ist OffsetHeight, clientHeight, scrollHeight?

Question

Gedanken zur Erklärung, was ist der Unterschied zwischen offsetHeight, clientHeight und scrollHeight oder offsetWidth, clientWidth und scrollWidth?

Man muss diesen Unterschied kennen, bevor man auf der Clientseite arbeitet. Andernfalls wird die Hälfte ihres Lebens damit verbracht, die Benutzeroberfläche zu reparieren.

Fiddle oder inline unter:

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>

Answer 1

den Unterschied Sie die box model, zu verstehen, müssen wissen, aber im Grunde genommen:

clientHeight:

kehrt die innere Höhe eines Elements in Pixeln, einschließlich padding aber nicht die horizontale scrollbar Höhe, Grenze oder Rand

offsetHeight:

ist eine Messung, die enthält das Element Grenzen, das Element vertikale Polsterung, das Element horizontal Bildlaufleiste (falls vorhanden, wenn gerendert) und die CSS-Höhe des Elements.

scrollHeight:

ist ein Maß für die Höhe eines Inhalts des Elements einschließlich Inhalt sichtbar nicht auf dem Bildschirm aufgrund

---

I überzulaufen wird es einfacher machen:

Bedenken Sie:

<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)
_{Höhe aller Inhalte + Polsterungen, trotz der Höhe des Elements.}

Clientheight: VISIBLE content & padding
_{Nur sichtbar Höhe: Inhaltsteil durch explizit definierte Höhe des Elements begrenzt.}

offset: VISIBLE content & padding+ border + scrollbar
_{Höhe durch das Element auf dem Dokument belegt.}