jQuery Dimensions

With jQuery, it is easy to handle the dimensions of elements and browser windows.

jQuery Dimension Methods

jQuery provides multiple important methods for handling dimensions:

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

jQuery width() and height() methods

The width() method sets or returns the width of the element (excluding padding, border, or margin).

The height() method sets or returns the height of the element (excluding padding, border, or margin).

The following example returns the width and height of the specified <div> element:

Example

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

Try it yourself

jQuery innerWidth() and innerHeight() methods

The innerWidth() method returns the width of the element (including padding).

The innerHeight() method returns the height of the element (including padding).

The following example returns the specified <div> element's inner-width/height:

Example

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

Try it yourself

jQuery outerWidth() and outerHeight() methods

The outerWidth() method returns the width of the element (including padding and border).

The outerHeight() method returns the height of the element (including padding and border).

The following example returns the outer-width/height of the specified <div> element:

Example

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

Try it yourself

The outerWidth(true) method returns the width of the element (including padding, border, and margin).

The outerHeight(true) method returns the height of the element (including padding, border, and margin).

Example

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

Try it yourself

jQuery - More width() and height()

The following example returns the width and height of the document (HTML document) and the window (browser viewport):

Example

$("button").click(function(){
  var txt="";
  txt += "Document width/height: " + $(document).width();
  txt += "x" + $(document).height() + "\n";
  txt += "Window width/height: " + $(window).width();
  txt += "x" + $(window).height();
  alert(txt);
});

Try it yourself

The following example sets the width and height of the specified <div> element:

Example

$("button").click(function(){
  $("#div1").width(500).height(500);
});

Try it yourself

jQuery CSS Reference Manual

For a complete reference to jQuery Dimensions, please visit our jQuery Dimensions reference manual.