How Big?

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

totalWidth = width + padding + border + margin

Use the following prototype definition:

Object.defineProperties (HTMLElement.prototype, {
totalWidth: {
get: function (): number { 
let style = window.getComputedStyle (this);
return this.offsetWidth + parseInt (style.marginLeft) + parseInt (style.marginRight)
}
}
});

totalHeight = height + padding + border + margin

Use the following prototype definition:

Object.defineProperties (HTMLElement.prototype, {
totalHeight: {
get: function (): number { 
let style = window.getComputedStyle (this);
return this.offsetHeight + parseInt (style.marginTop) + parseInt (style.marginBottom)
}
}
});

clientTop = top – (border + padding)

clientLeft = left – (border + padding)

offsetTop = top – (margin + border + padding)

offsetLeft = left – (margin + border + padding)