# clientWidth and clientHeight in JavaScript

Using `clientWidth` and `clientHeight` you’re able to get the pixel dimensions of an HTML element. The dimensions are calculated using the dimensions of content inside the HTML element, along with the padding.

📝 Borders, margins, or scrollbars (if present) are excluded when computing `clientWidth` and `clientHeight`

## Using clientWidth and clientHeight

``````<div id="foo">
Hello World
</div>
``````
``````const clientWidth = document.querySelector('#foo').clientWidth;
const clientHeight = document.querySelector('#foo').clientHeight;
``````

## Learning Exercises

As an exercise, try calculating the value of `clientWidth` and `clientHeight` of the HTML element below:

``````/**********************************************
**  If the HTML element is <div id="foo"/>  **
**********************************************/
const clientWidth = document.querySelector('div#foo').clientWidth;
const clientHeight = document.querySelector('div#foo').clientHeight;
console.log(clientWidth, clientHeight);
// --> 200, 100``````

How was it calculated? Simply add the padding, with the content inside the HTML element (ignore the margins and borders):

``````(10 + 50) + 140   // clientWidth === 200
(30) + 70         // clientHeight === 100
``````

Let’s try another! Try calculating the `clientWidth` and `clientHeight` of this HTML element:

``````(10 + 10) + 230   // clientWidth === 250
(30 + 20) + 70    // clientHeight === 120
``````

## Notes

• Block-level: `clientWidth` and `clientHeight` does NOT work with inline HTML elements (like `span`, `em`, or `a`). It’ll just return `0`!
• Rounded Values: Values are rounded to the nearest integer. If you need more precise values use getBoundingClientRect()
• Read-Only: You can’t assign a new value to change the dimensions of the HTML element. For example this doesn’t do anything: `someElement.clientWidth = 30`

## Browser Compatibility

`clientWidth` and `clientHeight` are supported on all major desktop and mobile browsers.

## Specification

Read the official W3C specs for detailed information about `clientWidth` and `clientHeight`.

NameSpecificationStatus
`clientWidth`CSS Object Model (CSSOM) View ModuleWorking Draft
`clientHeight`CSS Object Model (CSSOM) View ModuleWorking Draft

🔎 Searching...