1

Как можно получить нативным JS полную ширину элемента с учетом border, margin, padding, если эти свойства не заданы через JS?

2 ответа 2

5

Вот так

var element = document.getElementById("elem");
var marginLeft = parseInt(getComputedStyle(element, true).marginLeft);
var marginRight = parseInt(getComputedStyle(element, true).marginRight);
console.log(element.offsetWidth + marginLeft + marginRight)
#elem {
  width: 300px;
  height: 300px;
  padding: 15px;
  margin: 15px;
  border: 1px solid #000;
}
<div id="elem"></div>

7
  • А должно было быть 362 Commented 2 февр. 2018 в 13:47
  • А разве margin учитывается? 332 полная ширина блока
    – Puvvl
    Commented 2 февр. 2018 в 13:49
  • не работает, scrollWidth учитывает только padding, а clientWidth - padding и border
    – Amandi
    Commented 2 февр. 2018 в 13:49
  • clientWidth не учитывает border) offsetWidth учитывает)
    – Puvvl
    Commented 2 февр. 2018 в 13:51
  • Вы прочитали вопрос? Commented 2 февр. 2018 в 13:52
3

Берем offsetWidth который включает в себя padding и border.

А для margin. используем getComputedStyle

var element = document.getElementById('offsetWidth');

var style = window.getComputedStyle(element, null);
 
var width = element.offsetWidth;

var margin = parseFloat(style.marginLeft) + parseFloat(style.marginRight);


var allWidth = width + margin;

console.log(allWidth);
#offsetWidth{
  width: 100px;
  height: 100px;
  margin: 20px;
  padding: 10px;
  border: 1px solid green;
  background: red;
}
<div id="offsetWidth"></div>

1
  • Можно еще проще: var margin = parseFloat(style.margin)*2; Commented 2 февр. 2018 в 14:07

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.