codepiece to illustrate scrollHeight, offsetHeight and clientHeight in Javascript

gistfile1.html

<pre>
height 200
border 10
margin 11
padding 13
</pre>
<table><tr><td>
<div id="box" style="width:200px;height:200px;overflow:auto;border:10px solid red;margin:11px;padding:13px;font-size:15px;">
	Lorem ipsum content dolor mita 	
	Lorem ipsum content dolor mita 	
	Lorem ipsum content dolor mita 	
	Lorem ipsum content dolor mita 	
	Lorem ipsum content dolor mita 	
	Lorem ipsum content dolor mita 	
	Lorem ipsum content dolor mita 	
	Lorem ipsum content dolor mita 	
	Lorem ipsum content dolor mita 	
	Lorem ipsum content dolor mita 	
	Lorem ipsum content dolor mita 	
</div>
</td>
<td>
<textarea id="tbox" cols=30 rows=20></textarea>
</td>
</tr>
</table>
<table border=1 cellpadding=5 cellspacing=5>
<tr><td>Scrollheight<td><span id='_scroll'>&nbsp;</span></td>
<tr><td>Offsetheight<td><span id='_offset'>&nbsp;</span></td>
<tr><td>Clientheight<td><span id='_client'>&nbsp;</span></td>
</table>



<script type="text/javascript">

	var tbox = document.getElementById("tbox");
	var box = document.getElementById("box");
	
	var scroll = document.getElementById("_scroll");
	var offset = document.getElementById("_offset");
	var client = document.getElementById("_client");



function loop(){

	box.innerHTML = tbox.value;


	// console.log(box);
	// console.log(scroll);
	// console.log(offset);
	// console.log(client);

	scroll.innerHTML = box.scrollHeight;
	offset.innerHTML = box.offsetHeight;
	client.innerHTML = box.clientHeight;

	setTimeout('loop()', 200);
}

setTimeout('loop()', 200);
</script>