Всем привет!
В песочнице
jsbin.com прописал следующий HTML-код:
<!DOCTYPE html>
<html>
<head>
<style>
html {
overflow: scroll;
}
</style>
</head>
<body>
<script>
console.log(window.innerWidth)
console.log(document.documentElement.clientWidth)
console.log(document.documentElement.offsetWidth)
</script>
</body>
</html>
Ширину эмулятора окна браузера в песочнице установил на 420px. В стилях для HTML добавил полосу прокрутки для эксперимента. И, собственно, по результатам этого эксперимента и хочу задать вопрос.
В консоли получил три значения:
1) 420: здесь все отлично. Я выставил ширину окна на 420px и при использовании innerWidth для получил ожидаемый результат: 420, так как innerWidth учитывает ширину внутреннего содержимого + ширину полосы прокрутки.
2) 403: для clientWidth получил также ожидаемый результат: 420 - ширина прокрутки (17px), получаем 403
3) А вот с третьим значением возник вопрос: почему 403? offsetWidth должен считать ширину элемента целиком, включая полосу прокрутки, т.е. выдавать результат 420, а не 403.
Почему 403, а не 420?
P.S. С тегом BODY ситуация аналогичная.
Простой
