EN
JavaScript - element's offsetHeight vs clientHeight
4 points
In this short article, we would like to show, what is difference between HTML element's offsetHeight and clientHeight in JavaScript (under web browser).
Quick answer:
xxxxxxxxxx1
offsetHeight === clientHeight + borderTopWidth + borderBottomWidth
Practical example:
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div.element {7
padding: 5px;8
border: 10px solid gold;9
background: orange;10
width: 200px;11
height: 40px;12
}13
14
</style>15
</head>16
<body>17
<div id="element" class="element">Example text inside ...</div>18
<script>19
20
var element = document.querySelector('#element');21
22
console.log('clientHeight: ' + element.clientHeight);23
console.log('offsetHeight: ' + element.offsetHeight);24
/*25
clientHeight === 40px (internal height) + 2 * 5px (padding size)26
offsetHeight === 40px (internal height) + 2 * 5px (padding size) + 2 * 10px (border size)27
|28
v29
offsetHeight === clientHeight + 2 * 10px (border size)30
*/31
</script>32
</body>33
</html>
