什麼是offsetHeight，clientHeight，scrollHeight？

Question

想法解釋offsetHeight,clientHeight和scrollHeight或offsetWidth，clientWidth和scrollWidth之間的區別是什麼？

在客戶端工作之前，必須知道這種差異。否則，他們的一生將花在修復用戶界面上。下面

Fiddle，或在線：

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

要知道你必須瞭解box model的差異，但基本上：

clientHeight：

返回在像素的元件的內高度，包括填充物但不水平滾動條高度，邊界，或餘量

offsetHeight：

是測量其包含元素邊框，元素垂直填充，元素水平滾動條（如果呈現，則呈現）和元素CSS高度。

scrollHeight：

是一個元素的含量的高度的測量，包括內容不可見屏幕由於上溢

---

我將使它更容易：

考慮：

<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
_{高度通過文檔的元素佔據。}