JAVASCRIPT

jQuery - Dimensions

//jQuery width() and height() Methods
$("button").click(function(){
  var txt = "";
  txt += "Width: " + $("#div1").width() + "</br>";
  txt += "Height: " + $("#div1").height();
  $("#div1").html(txt);
});

//jQuery innerWidth() and innerHeight() Methods
$("button").click(function(){
  var txt = "";
  txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
  txt += "Inner height: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

//jQuery outerWidth() and outerHeight() Methods
$("button").click(function(){
  var txt = "";
  txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
  txt += "Outer height: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

//The width() method sets or returns the width of an element (excludes padding, border and margin).
//The height() method sets or returns the height of an element (excludes padding, border and margin).

//The innerWidth() method returns the width of an element (includes padding).
//The innerHeight() method returns the height of an element (includes padding).

//The outerWidth() method returns the width of an element (includes padding and border).
//The outerHeight() method returns the height of an element (includes padding and border).