Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta name="description" content="Pete - test" />
  <meta charset=utf-8 />
  <title>element.getBoundingClientRect() test</title>
 
  <link rel="stylesheet" href="https://raw.github.com/necolas/normalize.css/master/normalize.css">
</head>
<body>
  
  <h1>element.getBoundingClientRect() test</h1>
  
  <p><a href="https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect">https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect</a></p>
<div class="box" id="box1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  
  <div class="box" id="box2"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  
  <div><span id="getBoundingClientRect_result"></span></div>
    
</body>
</html>
 
.box {
  border:3px outset green;
  max-width:300px;
}
#box1 {
  width:100px;
}
#box2 {
  width:252px;
}
 
window.onload = function(e){
  var resultElement = document.getElementById('getBoundingClientRect_result');
  
  var box1 = document.getElementById('box1');
  var box2 = document.getElementById('box2');
  
  var box1TextRectangle = box1.getBoundingClientRect();
  // needed for IE8
  var box1Width = (box1TextRectangle.width ? box1TextRectangle.width : (box1TextRectangle.right-box1TextRectangle.left));
  var box1Height = (box1TextRectangle.height ? box1TextRectangle.height : (box1TextRectangle.bottom-box1TextRectangle.top));
  
  var box2TextRectangle = box2.getBoundingClientRect();
  // needed for IE8
  var box2Width =  (box2TextRectangle.width ? box2TextRectangle.width : (box2TextRectangle.right-box2TextRectangle.left));
  var box2Height = (box2TextRectangle.height ? box2TextRectangle.height : (box2TextRectangle.bottom-box2TextRectangle.top));
  
  var resultString = "";
  resultString += "<strong>box1 TextRectangle:</strong><br />";
  resultString += "top: "+box1TextRectangle.top+"<br />";
   resultString += "right: "+box1TextRectangle.right+"<br />";
   resultString += "bottom: "+box1TextRectangle.bottom+"<br />";
   resultString += "left: "+box1TextRectangle.left+"<br />";
   resultString += "width: "+box1Width+"<br />";
    resultString += "height: "+box1Height+"<br />"; 
  resultString += "<strong>box2 TextRectangle:</strong><br />";
  resultString += "top: "+box2TextRectangle.top+"<br />";
   resultString += "right: "+box2TextRectangle.right+"<br />";
   resultString += "bottom: "+box2TextRectangle.bottom+"<br />";
   resultString += "left: "+box2TextRectangle.left+"<br />";
   resultString += "width: "+box2TextRectangle.width+"<br />";
    resultString += "height: "+box2TextRectangle.height;
  
  resultElement.innerHTML = resultString;
};
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Sk8erPeterpro
0viewers