Разница между style.width и offsetwidth в HTML?

Ответ 1

Как правило, элемент offsetWidth - это измерение, которое включает границы элементов, горизонтальное заполнение элемента, вертикальную полосу прокрутки элемента (если она присутствует, если визуализирована) и ширина элемента CSS.

Источник: https://developer.mozilla.org/en/DOM/element.offsetWidth

Итак, это ширина вашего элемента с рамкой и дополнением. То же самое для высоты.

Ответ 2

offsetWidth возвращает вычисленную ширину элемента, а el.style.width просто возвращает свойство width, определенное в element.style, с помощью javascript и не отражает действительные размеры элемента.

Это означает, что если вы попытаетесь получить ширину элемента, обратившись к el.style, вы, вероятно, ничего не получите (sample), даже если ширина была определена в вашем CSS. Вы получите номер только в том случае, если он был определен в el.style на javascript.

Кроме того, offsetWidth дает вам реальную ширину вашего элемента, включая padding и border, если вы используете content-box css box model, которое является значением по умолчанию для box-sizing. Таким образом, вы можете думать о том, что, как вы установили width содержимого элемента, и padding/border верните его (sample).

Если вы используете border-box css box model, вы устанавливаете полную ширину элемента, включая padding и border уменьшите область содержимого (sample). Итак, в этом случае offsetWidth и el.style.width будет возвращать точно такие же числа (если el.style.width был ранее установлен javascript).