jQuery Dimensions

## jQuery Tutorial

jQuery HOME jQuery Intro jQuery Install jQuery Syntax jQuery Selectors jQuery Events

## jQuery Effects

jQuery Hide/Show jQuery Fade jQuery Slide jQuery Animate jQuery stop() jQuery Callback jQuery Chaining

## jQuery HTML

jQuery Get jQuery Set jQuery Add jQuery Remove jQuery CSS Classes jQuery css() jQuery Dimensions

## jQuery Traversing

jQuery Traversing jQuery Ancestors jQuery Descendants jQuery Siblings jQuery Filtering

## jQuery AJAX

jQuery AJAX Intro jQuery Load jQuery Get/Post

## jQuery Misc

jQuery noConflict()

## jQuery Examples

jQuery Examples jQuery Quiz jQuery Certificate

## jQuery References

jQuery Selectors jQuery Events jQuery Effects jQuery HTML/CSS jQuery Traversing jQuery AJAX jQuery Misc jQuery Properties

# jQuery - Dimensions

« Previous
Next Chapter »

With jQuery, it is easy to work with the dimensions of elements and browser window.

## jQuery Dimension Methods

jQuery has several important methods for working with dimensions:

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

## jQuery Dimensions

## jQuery width() and height() Methods

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

The height() method sets or returns the height of an element (includes NO 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: " + $("#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 an element (includes padding).

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

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

## 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 an element (includes padding and border).

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

The following example returns the outer-width/height of a 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 an element (includes padding, border, and margin).

The outerHeight(true) method returns the height of an element (includes 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 (the HTML document) and window (the 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 a specified <div> element:

## Example

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

## jQuery CSS Reference

For a complete overview of all jQuery CSS methods, please go to our jQuery HTML/CSS Reference.

« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE