offsetheight clientheight scrollheight区别

client_offset_scroll.js

    	/**
	 * @author monkindey
	 * @date 2014-09-23
	 * @reference http://stackoverflow.com/questions/22675126/
	 * what-is-offsetheight-clientheight-scrollheight
	 */
	var $id = function(id){
		return document.getElementById(id);
	};
	var box = $id('box');

	var height = [{
		name: 'clientHeight',
		// visible height + padding = 303
		value: box.clientHeight
	}, {
		name: 'offsetHeight',
		// clientHeight + border + scrollbar
		value: box.offsetHeight
	}, {
		name: 'scrollHeight',
		// clientHeight + non-visible height
		value: box.scrollHeight
	}];

	console.table(height);