jQuery width() Method

## 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 width() Method

jQuery HTML/CSS Methods

## Example

Return the width of a <div> element:

$("button").click(function(){
alert($("div").width());
});
Try it yourself »

## Definition and Usage

The width() method sets or returns the width of the selected elements.

When this method is used to return width, it returns the width of the FIRST matched element.

When this method is used to set width, it sets the width of ALL matched elements.

As the image below illustrates, this method does not include padding, border, or margin.

Related methods:

- height() - Sets or returns the height of an element
- innerWidth() - Returns the width of an element (includes padding)
- innerHeight() - Returns the height of an element (includes padding)
- outerWidth() - Returns the width of an element (includes padding and border).
- outerHeight() - Returns the width of an element (includes padding and border).

## Syntax

Return the width:

$(selector).width()

Set the width:

$(selector).width(value)

Set the width using a function:

$(selector).width(function(index,currentwidth))

Parameter | Description
--- | ---
value | Required for setting width. Specifies the width in px, em, pt, etc. Default unit is px

function(index,currentwidth)

Optional. Specifies a function that returns the new width of selected elements

- index - Returns the index position of the element in the set
- currentwidth - Returns the current width of the selected element

## Try it Yourself - Examples

Set the width of an element
How to set the width of an element using different units.

Decrease the width using a function
How to use a function to decrease the width of an element.

Return the width of the document and window elements
How to return the current width of the document and window elements.

Display dimensions with related methods
How to use width(), height(), innerHeight(), innerWidth(), outerWidth() and outerHeight().

jQuery HTML/CSS Methods

## 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