## jQuery width() Method
The jQuery `width()` method is a built-in HTML/CSS manipulation tool used to set or return the width of selected elements.
Unlike other dimension methods, `width()` specifically targets the content area of an element. It does **not** include padding, borders, or margins.
---
## Definition and Usage
* **Get Width:** When used to return a value, the `width()` method gets the width of the **first** matched element in the set.
* **Set Width:** When used to set a value, the `width()` method sets the width of **all** matched elements.
### Understanding the Box Model Dimensions
The diagram below illustrates how jQuery calculates dimensions. The `width()` method only measures the core content area:
```
+-----------------------------------------------------------+
| Margin |
| +-------------------------------------------------+ |
| | Border | |
| | +---------------------------------------+ | |
| | | Padding | | |
| | | +-----------------------------+ | | |
| | | | | | | |
| | | | Content | | | |
| | | | (width() / height()) | | | |
| | | | | | | |
| | | +-----------------------------+ | | |
| | | innerWidth() | | |
| | +---------------------------------------+ | |
| | outerWidth() | |
| +-------------------------------------------------+ |
| outerWidth(true) |
+-----------------------------------------------------------+
```
### Related Methods:
* `height()` - Sets or returns the height of an element (excluding padding, border, and margin).
* `innerWidth()` - Returns the width of an element (including padding).
* `innerHeight()` - Returns the height of an element (including padding).
* `outerWidth()` - Returns the width of an element (including padding and border).
* `outerHeight()` - Returns the height of an element (including padding and border).
---
## Syntax
### 1. Get the Width
Returns the width of the first matched element as a number (without unit suffix, e.g., `400` instead of `400px`).
```javascript
$(selector).width()
```
### 2. Set the Width
Sets the width of all matched elements using a specific value.
```javascript
$(selector).width(value)
```
### 3. Set the Width Using a Callback Function
Sets the width dynamically by passing a function that returns the new width.
```javascript
$(selector).width(function(index, currentWidth))
```
### Parameter Values
| Parameter | Type | Description |
| :--- | :--- | :--- |
| `value` | `String` \| `Number` | **Required (for setting).** Specifies the width of the element. Can be a number (e.g., `300` which defaults to `300px`) or a string with units (e.g., `"300px"`, `"20em"`, `"50%"`). |
| `function(index, currentWidth)` | `Function` | **Optional.** A callback function that returns the new width.
• `index` - The index position of the element in the set.
• `currentWidth` - The current width of the element. |
---
## Code Examples
### Example 1: Get the Width of an Element
The following example returns the width of a `
` element when a button is clicked:
```javascript
$("button").click(function(){
// Returns the width of the first div element (e.g., 250)
alert("Width of div: " + $("div").width());
});
```
### Example 2: Set the Width Using Different Units
You can set the width of elements using numbers (pixels by default) or strings with CSS units:
```javascript
$("button").click(function(){
// Sets the width of all divs to 400px
$("div").width(400);
// Alternatively, you can use strings with units:
// $("div").width("20em");
// $("div").width("50%");
});
```
### Example 3: Increase Width Using a Callback Function
This example demonstrates how to increase the width of selected elements dynamically by adding `50px` to their current width:
```javascript
$("button").click(function(){
$("div").width(function(index, currentWidth){
// Adds 50px to the current width of each div
return currentWidth + 50;
});
});
```
### Example 4: Get Document and Window Width
The `width()` method can also be used to find the dimensions of the browser viewport (window) and the HTML document:
```javascript
$(document).ready(function(){
// Get the width of the browser viewport
var winWidth = $(window).width();
// Get the width of the HTML document
var docWidth = $(document).width();
console.log("Window Width: " + winWidth + "px");
console.log("Document Width: " + docWidth + "px");
});
```
---
## Technical Considerations
1. **Unitless Return Values:** When retrieving the width using `$(selector).width()`, jQuery returns a unitless pixel value (e.g., `500`), which is highly convenient for mathematical calculations. If you need the value with the unit (e.g., `"500px"`), use `$(selector).css("width")` instead.
2. **Hidden Elements:** The `width()` method is capable of retrieving the width of elements that are hidden via CSS (`display: none`), whereas standard JavaScript properties like `offsetWidth` would return `0`.
3. **Window and Document:** You can apply `.width()` to the `window` and `document` objects, but you cannot set their widths. Attempting to set them will have no effect.
YouTip