Debug Position and Size of Elements

by skibulk

HTML

<p id="htmlText">Hello World</p>
<svg height="30" width="200">
  <text  id="svgText" x="0" y="15">
    Hello <tspan id="svgLetter">W</tspan>orld
  </text>
</svg>

CSS

html, body {
  margin: 0;
  padding: 0;
}

body {
  padding: 40px;
}

p, text {
  font-size: 1.2em;
}

JavaScript

function debugPositionAndSize(el) {
	var objProps = [
  	'offsetTop',
	  'offsetLeft',
	  'offsetWidth',
	  'offsetHeight',
	  'scrollTop',
	  'scrollLeft',
	  'scrollWidth',
	  'scrollHeight',
	  'clientTop',
	  'clientLeft',
	  'clientWidth',
	  'clientHeight'
  ];

  var styleProps = [
		'width',
	  'height',
	  'top',
	  'bottom',
	  'left',
	  'right',
	  'margin-top',
	  'margin-bottom',
	  'margin-left',
	  'margin-right',
	  'border-top-width',
	  'border-bottom-width',
	  'border-left-width',
	  'border-right-width',
	  'padding-top',
	  'padding-bottom',
	  'padding-left',
	  'padding-right'
  ];
  
  var i, out = {};
  
  // Get object properties
  for (i=0; i<objProps.length; i++) {
  	if (el[objProps[i]] !== undefined) {
	  	out[objProps[i]] = el[objProps[i]];
    }
  }
  
  // Get usable style properties
  var elStyle = getComputedStyle(el);
  var ignore = ['0px', 'auto', '', undefined];
  for (i=0; i<styleProps.length; i++) {
  	var val1 = el.style[styleProps[i]]; // declared styles
  	var val2 = elStyle[styleProps[i]]; // computed styles
  	if (val1 !== '' || ignore.indexOf(val2) === -1) {
	  	out[styleProps[i]] = val2;
    }
  }
  
  // Get client boundaries
	myExtend(out, el.getBoundingClientRect(), 'getBoundingClientRect()');
  var rects = el.getClientRects();
  if (rects.length > 1) {
		out['getClientRects()'] = rects;
    // for (i=0; i<rects.length; i++) {
    //   myExtend(out, rects[i], 'getClientRects().' + i);
    // }
  }

	// SVG functions
	if (el.getBBox) {
  	myExtend(out, el.getBBox(), 'getBBox');
  }
	if (el.getComputedTextLength) {
	  myExtend(out, el.getComputedTextLength(), 'getComputedTextLength()');
  }
  
  // Extend object
  function myExtend(target, source, prefix) {
    for (var key in source) {
      if (source[key] != undefined) {
        target[prefix + '.' + key] = source[key];
      }
    }
  }
  
  return...