boxModel.js

var $element = $("<div>");

var widthOfElement = $element.width();
var widthWithPadding = $element.innerWidth();
var widthWithBorder = $element.outerWidth();
var widthWithMargin = $element.outerWidth(true);

var widthOfPadding = widthWithPadding - widthOfElement;
var widthOfBorder = widthWithBorder - widthWithPadding;
var widthOfMargin = widthWithMargin - widthWithBorder;

var parseValue = function(value) { return parseInt(value, 10 ) || 0; };
var widthOfPaddingLeft = parseValue($element.css("padding-left"));
var widthOfBorderLeft = parseValue($element.css("border-left-width"));
var widthOfMarginLeft = parseValue($element.css("margin-left"));

boxModelUtils.ts

class BoxModelUtils {

  //-----------------------------------------------------------------------------------------------
  // STATIC METHODS.
  //-----------------------------------------------------------------------------------------------

  // BOXES.

  static elementBox($element) {
    return {
      width: $element.width(),
      height: $element.height()
    };
  }

  static paddingBox($element) {
    return {
      width: $element.innerWidth(),
      height: $element.innerHeight()
    };
  }

  static borderBox($element) {
    return {
      width: $element.outerWidth(),
      height: $element.outerHeight()
    };
  }

  static marginBox($element) {
    return {
      width: $element.outerWidth(true),
      height: $element.outerHeight(true)
    };
  }

  // DIMENSIONS.

  static elementDimension($element) {
    return this.elementBox($element);
  }

  static paddingDimension($element) {
    var paddingBox = this.paddingBox($element);
    var elementBox = this.elementBox($element);
    return {
      width: paddingBox.width - elementBox.width,
      height: paddingBox.height - elementBox.height
    };
  }

  static borderDimension($element) {
    var borderBox = this.borderBox($element);
    var paddingBox = this.paddingBox($element);
    return {
      width: borderBox.width - paddingBox.width,
      height: borderBox.height - paddingBox.height
    };
  }

  static marginDimension($element) {
    var marginBox = this.marginBox($element);
    var borderBox = this.borderBox($element);
    return {
      width: marginBox.width - borderBox.width,
      height: marginBox.height - borderBox.height
    };
  }

  // OFFSETS.

  static paddingOffsets($element) {
    return {
      "left": this.parseValue($element.css("padding-left")),
      "right": this.parseValue($element.css("padding-right")),
      "top": this.parseValue($element.css("padding-top")),
      "bottom": this.parseValue($element.css("padding-bottom"))
    };
  }

  static borderOffsets($element) {
    return {
      "left": this.parseValue($element.css("border-left-width")),
      "right": this.parseValue($element.css("border-right-width")),
      "top": this.parseValue($element.css("border-top-width")),
      "bottom": this.parseValue($element.css("border-bottom-width"))
    };
  }

  static marginOffsets($element) {
    return {
      "left": this.parseValue($element.css("margin-left")),
      "right": this.parseValue($element.css("margin-right")),
      "top": this.parseValue($element.css("margin-top")),
      "bottom": this.parseValue($element.css("margin-bottom"))
    };
  }

  //-----------------------------------------------------------------------------------------------
  // PRIVATE STATIC METHODS.
  //-----------------------------------------------------------------------------------------------

  private static parseValue(value) {
    return parseInt(value, 10) || 0;
  }

}