Easy Tutorial
❮ Event Bind Sel Nthlastoftype ❯

jQuery Dimensions


With jQuery, it's easy to handle the dimensions of elements and the browser window.


jQuery Dimension Methods

jQuery provides several important methods for handling dimensions:


jQuery Dimensions


jQuery width() and height() Methods

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

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

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

Example

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

jQuery innerWidth() and innerHeight() Methods

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

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

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

Example

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

jQuery outerWidth() and outerHeight() Methods

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

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

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

Example

$("button").click(function(){
  var txt="";
  txt+="Div width, including padding and border: " + $("#div1").outerWidth() + "</br>";
  txt+="Div height, including padding and border: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});
❮ Event Bind Sel Nthlastoftype ❯