How can you retrieve an element's dimensions while avoiding CSS properties that take up unnecessary space?
For example:
<!DOCTYPE html>
<html>
<head>
<style>
#foo {
height: 48px;
margin: 64px;
width: 120px;
padding: 23px;
border: 7px solid red;
}
</style>
</head>
<body bgcolor="#ffffff">
<input type="text" id="foo"/>
</body>
</html>
The computed style would appear as follows:
https://i.sstatic.net/id8pR.png
Methods I attempted:
1.) Using clientHeight and clientWidth
document.querySelector('#foo').clientHeight
94
document.querySelector('#foo').clientWidth
166
2.) Utilizing getClientRects and getBoundingClientRect
document.querySelector('#foo').getClientRects() // identical to getBoundingClientRect()
DOMRectList {0: DOMRect, length: 1}
0: DOMRect {x: 72, y: 72, width: 180, height: 108, top: 72, …}
length: 1
[[Prototype]]: DOMRectList
3.) Checking for width and height:
document.querySelector('#foo').width
0
document.querySelector('#foo').height
0
document.querySelector('#foo').style.height
""
document.querySelector('#foo').style.width
""
Expected results:
{'width: 120, height: 48}
{'element': {'width: 120, height: 48}, 'spacing': {'top': 64+7+23, 'left': 64+7+23 ...} // perfect!