var HAS_COMPUTED_STYLE = !!window.getComputedStyle;
var getStyles = window.getComputedStyle || function() {};

var COMPUTED_SIZE_INCLUDES_PADDING = (function() {
  if (!HAS_COMPUTED_STYLE) {
    return false;
  }

  var parent = document.body || document.documentElement;
  var e = document.createElement('div');
  e.style.cssText = 'width:10px;padding:2px;' +
    '-webkit-box-sizing:border-box;box-sizing:border-box;';
  parent.appendChild(e);

  var width = getStyles(e, null).width;
  var ret = width === '10px';

  parent.removeChild(e);

  return ret;
}());

/**
 * Retrieve the computed style for an element, parsed as a float.
 * @param {Element} element Element to get style for.
 * @param {string} style Style property.
 * @param {CSSStyleDeclaration} [styles] Optionally include clean styles to
 *     use instead of asking for them again.
 * @return {number} The parsed computed value or zero if that fails because IE
 *     will return 'auto' when the element doesn't have margins instead of
 *     the computed style.
 */
var getNumberStyle = function(element, style, styles) {
  if (HAS_COMPUTED_STYLE) {
    styles = styles || getStyles(element, null);
    var value = getFloat(styles[style]);

    // Support IE<=11 and W3C spec.
    if (!COMPUTED_SIZE_INCLUDES_PADDING && style === 'width') {
      value += getFloat(styles.paddingLeft) +
        getFloat(styles.paddingRight) +
        getFloat(styles.borderLeftWidth) +
        getFloat(styles.borderRightWidth);
    } else if (!COMPUTED_SIZE_INCLUDES_PADDING && style === 'height') {
      value += getFloat(styles.paddingTop) +
        getFloat(styles.paddingBottom) +
        getFloat(styles.borderTopWidth) +
        getFloat(styles.borderBottomWidth);
    }

    return value;
  } else {
    return getFloat($(element).css(style));
  }
};

var isNumber = function(n) {
	return !isNaN(parseFloat(n)) && isFinite(n);
}

var getFloat = function(value) {
  value = parseFloat(value);
  return isNumber(value) ? value : 0
};

function showWidth() {
  var output = document.querySelector('#output');
  var column = document.querySelector('.column');
  output.textContent = getNumberStyle(column, 'width');
}

window.addEventListener('resize', showWidth);

showWidth();