JSFiddle - React, Tailwind, and code Playground

by evild70

HTML

<div class="crazy">
  <p> some content </p>
</div>

<div class="output">
</div>

CSS

p {
    margin: 0;
}

.crazy {
  background-color: green;
  border: 5px solid red;
  height: 25px;
  padding: 25px 3px 50px 1px;
  margin: 25px 14px 25px 2px;
}

JavaScript

function getAbsoluteHeight(el) {
  // Get the DOM Node if you pass in a string
  el = (typeof el === 'string') ? document.querySelector(el) : el; 

  var styles = window.getComputedStyle(el);
  var margin = parseFloat(styles['marginTop']) +
               parseFloat(styles['marginBottom']);

  return el.offsetHeight + margin;
}

// Should equal 16 + 3 + 20 + 30 + 50 + 3 + 17 = 139
// margin + border + padding + height + padding + broder + margin
var output = document.querySelector('.output');
var height = getAbsoluteHeight('.crazy');
output.innerHTML = 'Height: ' + height + 'px <br /> offsetTop: ' + document.querySelector('.crazy').offsetTop;