DOM Enlightenment Book

by peroli

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div></div>

CSS

div {
  height: 25px;
  width: 25px;
  background-color: red;
  border: 25px solid gray;
  padding: 25px;
}

JavaScript

var div = document.querySelector('div');
var rect = div.getBoundingClientRect();

console.log(rect.height, rect.width); //logs '125 125'
//because 25px border + 25px padding + 25 content + 25 padding + 25 border = 125
console.log(div.offsetHeight, div.offsetWidth); //logs '125 125'
//because 25px border + 25px padding + 25 content + 25 padding + 25 border = 125