Get DOM element dimension in JavaScript

This_DIV_Element_CSS {
background:white;
width:220px;
height:280px;
padding:20px;
border:10px solid green;
text-align:left;
white-space:nowrap;
margin:auto;
overflow:auto;
}

JavaScript syntax:
var client_width = theElement.clientWidth;
Output is Number type.

JavaScript syntax:
var client_height = theElement.clientHeight;
Output is Number type.

JavaScript syntax:
var offset_width = theElement.offsetWidth;
Output is Number type.

JavaScript syntax:
var offset_width = theElement.offsetHeight;
Output is Number type.

JavaScript syntax:
var computed_object = window.getComputedStyle(theElement, null);
var computed_height = computed_object.getPropertyValue("height");
Output is String type (with px unit).

JavaScript syntax:
var computed_object = window.getComputedStyle(theElement, null);
var computed_height = computed_object.getPropertyValue("width");
Output is String type (with px unit).

JavaScript syntax:
var style_width = theElement.style.width;
Output is String type. Only available if there's style attribute which defines the width of that element.

JavaScript syntax:
var style_width = theElement.style.height;
Output is String type. Only available if there's style attribute which defines the height of that element.

JavaScript syntax:
var style_width = window.innerWidth;
Output is Number type.

JavaScript syntax:
var style_width = window.innerHeight;
Output is Number type.

JavaScript syntax:
var style_width = window.outerWidth;
Output is Number type.

JavaScript syntax:
var style_width = window.outerHeight;
Output is Number type.