Get Width and Height of an Element

To get the width and height of an element, you use the offsetWidth and offsetHeight properties of the element:

const box = document.querySelector('.box');

const width = box.offsetWidth,
    height = box.offsetHeight;Code language: JavaScript (javascript)

The offsetWidth and offsetHeight includes the padding and border.

To get the width and height of an element without the border, you use the clientWidth and clientHeight properties:

const box = document.querySelector('.box');

const width = box.clientWidth,
    height = box.clientHeight;Code language: JavaScript (javascript)

Note that the clientWidth and clientHeight properties also include the paddings.