> For the complete documentation index, see [llms.txt](https://jscula.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jscula.gitbook.io/docs/getters-and-setters/width-and-height.md).

# Width & Height

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

### Jscula width() and height() Methods

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

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

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

```javascript
$("#container").width();
```

```javascript
$("#container").height();
```

```javascript
$("button").click(()=>{
   let boxWidth = $("#div1").width(); // gets the width of the selected element 
   let boxHeight = $("#div1").height(); //get height of the selected element
});
```

***

**Set the Width and Height**

```javascript
$("#container").width('200px'); // set 200px

$("#container").width('100%'); // sets 100%
$("#container").width(100); // sets 100px
```

```javascript
$("#container").height(500); //sets 500px
```

```javascript
$("button").click(function(e){
   let boxWidth = $("#div1").width(120); // sets 120px width to the selected element 
   let boxHeight = $("#div1").height(500); //sets 500px height to the selected element
});
```

You can simply chain it like this:

```javascript
$("button").click(function(e){ 
   $("#div1").width(120).height(500); 
});
```

***

#### Functional Setting of Width and Height

You can use the `.width()` and `.height()` methods with a callback function to set these values dynamically. The callback function makes the current value available. Here is an example:

```javascript
$("button").click(() => { 
   $("#div1").width(function(currentValue) { 
        return this.height() + currentValue; 
    }); 
});
```

In this example, clicking the button will update the width of the element by adding its current height to it width.

```javascript
$("button").click(() => { 
   $("#div1").height(function(currentValue) { 
        return this.width(); 
    }); 
});
```

In this example, clicking the button will update the height of the element using it width.