Как такой упростить js код?

Question

[Максим Сафаралиев]

Доброго времени суток. Пишу функцию, чтобы получить ширину элемента, включая внешние и внутренние отступы.
Есть такой код

function fullWidth(el) {
			let elStyle = {}

			elStyle.width = getStyle(el, 'width')
			elStyle.marginLeft = getStyle(el, 'margin-left')
			elStyle.marginRight = getStyle(el, 'margin-right')
			elStyle.marginLeftRight = elStyle.marginLeft + elStyle.marginRight
			elStyle.paddingLeft = getStyle(el, 'padding-left')
			elStyle.paddingRight = getStyle(el, 'padding-right')
			elStyle.paddingLeftRight = elStyle.paddingLeft + elStyle.paddingRight
			elStyle.fullWidth = elStyle.width + elStyle.marginLeftRight + elStyle.paddingLeftRight

			console.log(elStyle.fullWidth)
		}

function getStyle(el, style) {
	return parseInt(window.getComputedStyle(el).getPropertyValue(style))
}

Но складывается ощущение, что это можно было сделать проще. Как упростить?

Answer 1

[Сергей Соколов]

Получили объект всех свойств элемента. Перечислили свойства, которые нужно сложить. Средуцировали массив, прибавляя к накапливаемому значению (начальное = 0) очередное, приведённое к числу.

function fullWidth(el) {
  const style = window.getComputedStyle(el);
  
  return 'width,margin-left,margin-right,padding-left,padding-right'
    .split(',')
    .reduce((p,c) => p + parseFloat(style[c]), 0)
  ;
}

Comments

[Максим Сафаралиев]

.reduce() - весьма элегантное решение на мой взгляд. Спасибо.

Answer 2

[Денис]

Пример в песочнице

div   {
  width: 150px;
  height: 150px;
  padding: 10px;
  margin: 10px;
  border: 10px solid #999;
}

let div = document.querySelector('div'),
cs = getComputedStyle(div);
console.log(div.offsetWidth + parseInt(cs.marginLeft) + parseInt(cs.marginRight)); // 210

Answer 3

[Юнус Газиев]

Вот необходимый тебе пример jsfiddle.net/FvRAm/15