Element Dimensions

by Zoltan Boros

HTML

<div id="container">
    <div id="content">FooBar</div>
</div>

<pre id="output-container"></pre>

CSS

body {
    padding: 1em;
}

#container {
    margin: 0;
    padding: 5px;
    width: 250px;
    height: 250px;
    overflow: auto;
    border: 2px dotted #8080ff;
}

#content {
    width: 2000px;
    height: 200px;
    padding: 10px;
    border: 2px dashed #000080;
    background-color: #b0b0ff;
}

JavaScript

var outputElement = document.getElementById ("output-container");

function printDimensions(elementId)
{
	outputElement.innerHTML += "Element Id: " + elementId + "\n";
	var element = document.getElementById(elementId);
	var w = element.clientWidth;
	var h = element.clientHeight;
	outputElement.innerHTML += "\tClientSize: " + w + " x " + h + " px\n";
    
	w = element.offsetWidth;
	h = element.offsetHeight;
	outputElement.innerHTML += "\tOffsetSize: " + w + " x " + h + " px\n";
    
	w = element.scrollWidth;
	h = element.scrollHeight;
	outputElement.innerHTML += "\tScrollSize: " + w + " x " + h + " px\n\n";
}

printDimensions('container');
printDimensions('content');