DOM Enlightenment Book

by peroli

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div id="div1">
  <p id="p1"></p>
</div>
<div id="div2">
  <p id="p2"></p>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

#div1, #div2 {
  height: 100px;
  width: 100px;
  overflow: auto;
}

#div2 {
  border: 1px solid black;
}

#p1 {
  height: 1000px;
  width: 1000px;
  background-color: red;
}

#p2 {
  height: 50px;
  width: 50px;
  background-color: blue;
}

JavaScript

var div1 = document.querySelector('#div1');
var p1 = document.querySelector('#p1');

console.log(div1.scrollHeight, div1.scrollWidth); //logs '1000 1000'

var div2 = document.querySelector('#div2');
var p2 = document.querySelector('#p2');
console.log(div2.scrollHeight, div2.scrollWidth); //logs '100 100'
console.log(p2.clientHeight, p2.clientWidth); //logs '50 50'