The JavaScript function presented in this page (named "getBoxPS()") can be used to get the top /left position and width /height sizes of Div in page, or other HTML elements.
The function receives the HTML element and returns an object with four properties: "x", "y" for the "Left" and "Top" position of that element, and "w", "h" for the "Width" and "Height" sizes (in pixels).
It works in all major browsers: Chrome, Firefox, IE, Opera, Safary.

Code of the function - click to select it

//JS function to get position and size of html element - http://coursesweb.net/javascript/
//receives the element; returns object: {x:left, y:top, w:width, h:height} in pixels
function getBoxPS(elm){
  function getOffset(object,offset){if(!object)return;offset.x+=object.offsetLeft;offset.y+=object.offsetTop;getOffset(object.offsetParent,offset);}
  function getScrolled(object,scrolled){if(!object)return;scrolled.x+=object.scrollLeft;scrolled.y+=object.scrollTop;if(object.tagName.toLowerCase()!='html')getScrolled(object.parentNode,scrolled);}
  function getZoomFactor(){var factor=1;if(document.body.getBoundingClientRect){var rect=document.body.getBoundingClientRect();var physicalW=rect.right-rect.left;var logicalW=document.body.offsetWidth;factor=Math.round((physicalW/logicalW)*100)/100;}
  return factor;}
  var re={x:0,y:0,w:0,h:0};if(elm.getBoundingClientRect){var rect=elm.getBoundingClientRect();var x=rect.left;var y=rect.top;var w=rect.right-rect.left;var h=rect.bottom-rect.top;if(navigator.appName.toLowerCase()=='microsoft internet explorer'){x-=document.documentElement.clientLeft;y-=document.documentElement.clientTop;var zoomFactor=getZoomFactor();if(zoomFactor!=1){x=Math.round(x/zoomFactor);y=Math.round(y/zoomFactor);w=Math.round(w/zoomFactor);h=Math.round(h/zoomFactor);}}
  re={x:Math.round(x),y:Math.round(y),w:Math.round(w),h:Math.round(h)};}
  else{var offset={x:0,y:0};getOffset(elm,offset);var scrolled={x:0,y:0};getScrolled(elm.parentNode,scrolled);var x=offset.x-scrolled.x;var y=offset.y-scrolled.y;var w=elm.offsetWidth;var h=elm.offsetHeight;re={x:Math.round(x),y:Math.round(y),w:Math.round(w),h:Math.round(h)};}
  return re;
}
- Example: Shows the position x/y and size w/h of the clicked Div.
<style>
#ex_dv1, #ex_dv2 {
display:inline-block;
font-size:22px;
padding:25px 15px;
margin:3px 3%;
text-align:center;
}
#ex_dv1 { background:#ffbb99; width:130px;}
#ex_dv2 { background:#99bbff; width:160px;}
</style>

<p id="show_pos_size">Here it is added data with position and size.</p>
<div id="ex_dv1">Div 1</div>
<div id="ex_dv2">Div 2<br>Illusion</div>
<script>
// <![CDATA[
//returns object with x,y position and w,h size of elm
function getBoxPS(elm){
  function getOffset(object,offset){if(!object)return;offset.x+=object.offsetLeft;offset.y+=object.offsetTop;getOffset(object.offsetParent,offset);}
  function getScrolled(object,scrolled){if(!object)return;scrolled.x+=object.scrollLeft;scrolled.y+=object.scrollTop;if(object.tagName.toLowerCase()!='html')getScrolled(object.parentNode,scrolled);}
  function getZoomFactor(){var factor=1;if(document.body.getBoundingClientRect){var rect=document.body.getBoundingClientRect();var physicalW=rect.right-rect.left;var logicalW=document.body.offsetWidth;factor=Math.round((physicalW/logicalW)*100)/100;}
  return factor;}
  var re={x:0,y:0,w:0,h:0};if(elm.getBoundingClientRect){var rect=elm.getBoundingClientRect();var x=rect.left;var y=rect.top;var w=rect.right-rect.left;var h=rect.bottom-rect.top;if(navigator.appName.toLowerCase()=='microsoft internet explorer'){x-=document.documentElement.clientLeft;y-=document.documentElement.clientTop;var zoomFactor=getZoomFactor();if(zoomFactor!=1){x=Math.round(x/zoomFactor);y=Math.round(y/zoomFactor);w=Math.round(w/zoomFactor);h=Math.round(h/zoomFactor);}}
  re={x:Math.round(x),y:Math.round(y),w:Math.round(w),h:Math.round(h)};}
  else{var offset={x:0,y:0};getOffset(elm,offset);var scrolled={x:0,y:0};getScrolled(elm.parentNode,scrolled);var x=offset.x-scrolled.x;var y=offset.y-scrolled.y;var w=elm.offsetWidth;var h=elm.offsetHeight;re={x:Math.round(x),y:Math.round(y),w:Math.round(w),h:Math.round(h)};}
  return re;
}

//where to show data with position and size
var show_pos_size = document.getElementById('show_pos_size');

//get #ex_dv1 and #ex_dv2
var ex_dv1 = document.getElementById('ex_dv1');
var ex_dv2 = document.getElementById('ex_dv2');

//registers click event on ex_dv1, ex_dv2
ex_dv1.addEventListener('click', function(e){
  var ob_ps = getBoxPS(e.target); //object with position/size data
  show_pos_size.innerHTML ='left: '+ ob_ps.x +' / top: '+ ob_ps.y +'<br>width: '+ ob_ps.w +' / height: '+ ob_ps.h;
});
ex_dv2.addEventListener('click', function(e){
  var ob_ps = getBoxPS(e.target); //object with position/size data
  show_pos_size.innerHTML ='left: '+ ob_ps.x +' / top: '+ ob_ps.y +'<br>width: '+ ob_ps.w +' / height: '+ ob_ps.h;
});
// ]]>
</script>
- Demo, click on the two Divs.

Here it is added data with position and size.

Div 1
Div 2
Illusion

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag adds a new line into a paragraph?
<b> <br> <p>
First line ...<br>
Other line...
Which CSS property can be used to add space between letters?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
}
What JavaScript function can be used to get access to HTML element with a specified ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);
Click on the "echo" correct instruction.
echo "CoursesWeb.net" echo "CoursesWeb.net"; echo ""CoursesWeb.net";
echo "Address URL: http://CoursesWeb.net";
Get position and size of Div in page

Last accessed pages

  1. Bubbles3 (40499)
  2. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (34769)
  3. Rotate HTML objects, Div, Span, images with jQuery (5501)
  4. $_GET, $_POST and $_REQUEST Variables (23432)
  5. Get Lower, Higher, and Closest Number (1449)

Popular pages this month

  1. Qwop (4653)
  2. Bubbles3 (3756)
  3. Butterfly Kyodai (3124)
  4. Drag Racer V3 (3079)
  5. Zuma Deluxe (2227)