# How to get the width and height of the window using JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Aug 12, 2020, updated Sep 23, 2021. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-dom-get-the-width-and-height-of-the-window

> Learn how to get the width and height of the window in JavaScript.

To get the width and height of the browser window, you can use the `innerWidth` and `innerHeight` properties of the `window` object.

The `innerWidth` and `innerHeight` properties return the width and height of the window's content area.

Here is an example:

```javascript
const width = window.innerWidth;
const height = window.innerHeight;
```

The above solution works in all modern browsers, and IE9 and up. 

To support IE8 and earlier(seriously?), you can use the `clientWidth` and `clientHeight` properties too:

```javascript
const width = window.innerWidth ||
    document.documentElement.clientWidth ||
    document.body.clientWidth;

const height = window.innerHeight ||
    document.documentElement.clientHeight ||
    document.body.clientHeight;
```

## ES11 `globalThis`

ECMAScript 2020 (ES11) introduced the `globalThis` variable that refers to the global `this` context on which the code is running.

For example, in web browsers, `globalThis` refers to `this` and in a Node.js application, `globalThis` will be `global`.

You can use `globalThis` to get the width and height of the window's content area as well as outer area:

```javascript
// content area
const width = globalThis.innerWidth;
const height = globalThis.innerHeight;

// outer area
const width = globalThis.outerWidth;
const height = globalThis.outerHeight;
```