> For the complete documentation index, see [llms.txt](https://edrus.gitbook.io/mt-it/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://edrus.gitbook.io/mt-it/2nd-month/week-6/dom-document-object-model/manipulating-elements-styles/getting-the-width-and-height-of-an-element.md).
# Getting the Width and Height of an Element
The following picture displays the CSS box model that includes a block element with content, padding, border, and margin:
To get the element’s width and height that include the padding and border, you use the `offsetWidth` and `offsetHeight` properties of the element:
```javascript
let box = document.querySelector('.box');
let width = box.offsetWidth;
let height = box.offsetHeight;Code language: JavaScript (javascript)
```
The following picture illustrates the `offsetWidth` and `offsetHeight` of an element:
See the following example:
```xml
Getting the Width and Height of an Element
Code language: HTML, XML (xml)
```
Output:
```css
{width: 122, height: 172}Code language: CSS (css)
```
In this example:
* The width is 100px
* The border is 1px on each side, so 2px for both
* The padding 10px on each side, so 20px for both
Therefore, the total width 12px. Similarly, the height is 172px.
To get the width & height of an element as floating-point after CSS transformation, you use the `getBoundingClientRect()` method of the DOM element. For example:
```xml
Getting the Width and Height of an Element
Code language: HTML, XML (xml)
```
Output:
```css
{width: 122, height: 172}
DOMRect {x: 7.997685432434082, y: 7.997685432434082, width: 121.95602416992188, height: 171.95602416992188, top: 7.997685432434082, …}Code language: CSS (css)
```
### clientWidth & clientHeight
To get the element’s width and height that include padding but without the border, you use the `clientWidth` and `clientHeight` properties:
```javascript
let box = document.querySelector('.box');
let width = box.clientWidth;
let height = box.clientHeight;Code language: JavaScript (javascript)
```
The following picture illustrates the `clientWidth` and `clientHeight` of an element:
To get the margin of an element, you use the [`getComputedStyle()`](https://www.javascripttutorial.net/javascript-dom/javascript-getcomputedstyle/) method:
```javascript
let box = document.querySelector('.box');
let style = getComputedStyle(box);
let marginLeft = parseInt(style.marginLeft);
let marginRight = parseInt(style.marginRight);
let marginTop = parseInt(style.marginTop);
let marginBottom = parseInt(style.marginBottom);Code language: JavaScript (javascript)
```
To get the border width of an element, you use the property of the `style` object returned by the `getComputedStyle()` method:
```javascript
let box = document.querySelector('.box');
let style = getComputedStyle(box);
let borderTopWidth = parseInt(style.borderTopWidth) || 0;
let borderLeftWidth = parseInt(style.borderLeftWidth) || 0;
let borderBottomWidth = parseInt(style.borderBottomWidth) || 0;
let borderRightWidth = parseInt(style.borderRightWidth) || 0;
Code language: JavaScript (javascript)
```
To get the height and width of the window, you use the following code:
```javascript
let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
let height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;Code language: JavaScript (javascript)
```
### Summary
* Use offsetWidth & offsetHeight properties of the DOM element to get its the width and height.
