Search notes:
DOM example: offsetWidth / offsetHeight
An
element's offsetWidth and
offsetHeight evaluate to the width and height that an element actually occupies. Included in these dimensions is
- border
- padding
- vertical scrollbar (if shown)
Not included is the element's margin.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>offsetWidth / offsetHeight</title>
<script type="text/javascript">
function main() {
var txt = document.getElementById('txt');
console.log('txt.offsetWidth = ' + txt.offsetWidth );
console.log('txt.offsetHeight = ' + txt.offsetHeight);
var stl = window.getComputedStyle(txt);
console.log('stl.width = ' + stl.width );
console.log('stl.height = ' + stl.height);
}
</script>
</head>
<body onload='main()'>
<span id='txt'>Hello world</span>
</body>
</html>
On my computer, this test wrote the following text into the console window:
txt.offsetWidth = 77
txt.offsetHeight = 17
stl.width = auto
stl.height = auto