Clientwidth и offsetWidth возвращают другое значение по сравнению с пользовательским интерфейсом браузера

Question

У меня странное поведение с моим кодом JavaScript.Я хочу получить ширину <div> контейнера через код JavaScript, но он не возвращает мне тот же размер, что и пользовательский интерфейс chrome / firefox sais.Я попытался получить ширину определенного контейнера div тремя различными способами: 1. Width .offsetWidth 2. Ширина функции getBoundingClientRect () 3. С помощью jquery и width ()

Все три дают мне видто же самое, но браузер показывает мне другую ширину.Я получаю ширину браузера с помощью щелчка правой кнопкой мыши -> inspect element -> наведите курсор мыши на конкретный элемент, и он покажет вам ширину px.

Например, ширина div браузера 971px, а ширина javascript возвращает мне 761px.Что я здесь не так делаю?

Ниже приведен код (но я не знаю, как правильно его использовать :().

let container = document.getElementById('container');


let offsetWidth = container.offsetWidth;
let boundingWidth = container.getBoundingClientRect().width
let jqueryWidth = $('#container').width();

.container {
  display: flex;
  flex-flow: column nowrap;
}

.rows {
  display: block;
  position: relative;
  overflow: auto hidden;
  height: 60px;
}

<div id="container" className={styles.container}>
    <div className={styles.rows}> {/* Here is some code */}</div>
</div>

Я надеюсь, что вы можете мне помочь, и если вам нужна дополнительная информация, пожалуйста, дайте мне знать.

Answer 1

Методы JS (я тестировал с использованием .clientWidth и .clientHeight, но другие должны быть похожими) включают значения отступов и полей.

скажем, например, у нас есть ширина div 638 пикселей в хроме, ширина горизонтальнаязаполнение 8px, выполнение clientWidth приведет к 654. (638 основ + 8 отступов влево + 8 отступов влево).Затем, давайте добавим margin-left:10px мы сейчас потеряли 10 пикселей от нашего значения и теперь получаем 644. (638 базовых + 8 отступов влево + 8 отступов вправо - 10 полей слева)

Помогает ли это?

РЕДАКТИРОВАТЬ: Вы можете проверить это для себя в Chrome инспектора, как я сделал.Используйте консоль Chrome, чтобы легко запускать локальный JS.