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;

};