EN
JavaScript - element's offsetWidth vs clientWidth
7 points
In this short article, we would like to show, what is difference between HTML element's offsetWidth and clientWidth in JavaScript (under web browser).
Quick answer:
xxxxxxxxxx1
offsetWidth === clientWidth + borderLeftWidth + borderRightWidth
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('clientWidth: ' + element.clientWidth);23
console.log('offsetWidth: ' + element.offsetWidth);24
/*25
clientWidth === 200px (internal width) + 2 * 5px (padding size)26
offsetWidth === 200px (internal width) + 2 * 5px (padding size) + 2 * 10px (border size)27
|28
v29
offsetWidth === clientWidth + 2 * 10px (border size)30
*/31
</script>32
</body>33
</html>
