//get current dimensions and position of an element
//usage:   var dims = new ElementDimensions(elementToMeasure);
function ElementDimensions(elem)
{
	this.inner = {	//content and padding; gives 0 for inline elements (you can use scrollWidth/Height if it's inline)
		width: elem.clientWidth,
		height: elem.clientHeight
	};
	this.outer = {	//everything (content, padding, scrollbar, border)
		width: elem.offsetWidth,
		height: elem.offsetHeight
	};
	this.scroll = {
		//width & height of entire content field (including padding), visible or not
		//incorrect in Opera; it doesn't include the padding
		width: elem.scrollWidth,
		//if there are no scrollbars, IE gives the actual height of the content instead of the height of the element
		height: elem.scrollHeight<elem.clientHeight ? elem.clientHeight : elem.scrollHeight,
		
		//scroll position of content & padding
		left: elem.scrollLeft,
		top: elem.scrollTop
	};
	
	//position of element from the top-left corner of the document
	var tmp = elem;
	this.left = this.top = 0;
	while(tmp.offsetParent)
	{
		this.left += tmp.offsetLeft;
		this.top += tmp.offsetTop;
		tmp = tmp.offsetParent;
	}
}

//get current dimensions and positions of an element
//usage:   var dims = new ElementDimensions(elementToMeasure);
function ElementDimensions(elem)
{
	this.inner = {	//content and padding; gives 0 for inline elements (you can use scrollWidth/Height if it's inline)
		width: elem.clientWidth,
		height: elem.clientHeight
	};
	this.outer = {	//everything (content, padding, scrollbar, border)
		width: elem.offsetWidth,
		height: elem.offsetHeight
	};
	this.scroll = {
		//width & height of entire content field (including padding), visible or not
		//incorrect in Opera; it doesn't include the padding
		width: elem.scrollWidth,
		//if there are no scrollbars, IE gives the actual height of the content instead of the height of the element
		height: elem.scrollHeight<elem.clientHeight ? elem.clientHeight : elem.scrollHeight,
		
		//scroll position of content & padding
		left: elem.scrollLeft,
		top: elem.scrollTop
	};
	
	//position of element from the top-left corner of the document
	var tmp = elem;
	this.left = this.top = 0;
	while(tmp.offsetParent)
	{
		this.left += tmp.offsetLeft;
		this.top += tmp.offsetTop;
		tmp = tmp.offsetParent;
	}
}

Element Dimensions

javascript

JavaScript