offsetHeight Vs clientHeight vs scrollHeight

Thought of explaining what is the difference between offsetHeight, clientHeight and scrollHeight or offsetWidth, clientWidth and scrollWidth? One must know this difference before working on the client side. Otherwise half of your life will be spent in fixing the UI. Check the sample fiddle.

by Anchit Gupta

HTML

<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

#MainDIV{
				border:5px solid red;
			}

JavaScript

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,246,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');}