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 - https://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.

<!doctype html>
<html>
<head>
<title>title</title>
<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>
</head>
<body>
<h4>Click on each Div</h4>

<p id='show_pos_size'>Here it displays data with position and size of the clicked Div.</p>
<div id='ex_dv1'>Div 1</div>
<div id='ex_dv2'>Div 2<br>Illusion</div>
<script>
//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>
</body>
</html>
- Demo, click on the two Divs.

Here it adds data with position and size.

Div 1
Div 2
Illusion

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag renders as emphasized text, displaying the text oblique?
<strong> <pre> <em>
<p>Web development courses: <em>CoursesWeb.net</em></p>
Which CSS property defines the space between the element border and its content?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Click on the method which returns the first element that matches a specified group of selectors.
getElementsByName() querySelector() querySelectorAll()
// gets first Div with class="cls", and shows its content
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicate the PHP variable that contains data from a form sent with method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
Get position and size of Div in page

Last accessed pages

  1. Get the value of the selected /checked checkboxes in a form (39727)
  2. JavaScript code and PHP (22407)
  3. Read Excel file data in PHP - PhpExcelReader (63527)
  4. Contact page - CoursesWeb (2152)
  5. Tabs effect with CSS (2864)

Popular pages this month

  1. Contact page - CoursesWeb (1638)
  2. Tabs effect with CSS (1624)
  3. Insert, Select and Update NULL value in MySQL (822)
  4. Read Excel file data in PHP - PhpExcelReader (653)
  5. PHP getElementById and getElementsByTagName (414)