Latest web development tutorials

jQuery Dimensions

By jQuery, easy to handle, and the size of the elements of the browser window.

jQuery dimension methods

jQuery provides an important method for processing a plurality of dimensions:

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

jQuery Dimensions

jQuery Dimensions

jQuery width () and height () method

width () method sets or returns the width of the elements (not including padding, border or margin).

height () method sets or returns the height of the element (not including padding, border or margin).

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

Examples

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

try it"

jQuery innerWidth () and innerHeight () method

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

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

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

Examples

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

try it"

jQuery outerWidth () and outerHeight () method

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

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

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

Examples

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

try it