clientWidth and clientHeight in JavaScript

<div id="foo">
  Hello World
</div>

const clientWidth = document.querySelector('#foo').clientWidth;
const clientHeight = document.querySelector('#foo').clientHeight;

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

/**********************************************
 **  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? Add the padding, with the content inside the HTML element, and 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

• 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

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

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