Внешняя ширина без jquery

Ответ 1

Нет, но вы можете получить offsetWidth, что, вероятно, то, что вы хотите.

С http://www.quirksmode.org/dom/w3c_cssom.html

offsetWidth и offsetHeight

Ширина и высота всего элемента, включая границы и отступы, исключая поля.

clientWidth и clientHeight

Ширина и высота элемента, включая отступы, исключая границы и поля.

Смотрите эту скрипку для примера.

var elm = document.querySelector('div');

document.body.innerHTML += '
  clientWidth: ${elm.clientWidth} px
  <br>
  scrollWidth: ${elm.scrollWidth} px
  <br>
  offsetWidth: ${elm.offsetWidth} px'
  
  

div{
  width      : 200px;
  padding    : 10px;
  border     : 10px solid gold;
  
  margin     : 10px;
  background : lightgreen;
}

<div></div>

Ответ 2

Здесь функция getOuterWidth которая вычисляет внешнюю ширину элемента:

(Использование getComputedStyle для учета границ)

var elm = document.querySelector('div');

function getOuterWidth(elm){
  var w = elm.clientWidth,
      style = getComputedStyle(elm);
  
  // add borders
  w += parseInt(style.borderLeftWidth) + parseInt(style.borderRightWidth)
  
  return w;
}

elm.innerHTML = getOuterWidth(elm) + 'px';

div{
  background: lightblue;
  padding: 10px;
  margin: 10px;
  border: 10px solid gold;
  width: 200px;
  
  font: 20px solid Arial;
}

<div></div>