outerWidth without jquery

Question

It\'s possible to get the element outerWidth using the dom?

Ej:

var width = document.getElementById(\'myDiv\').outerWidth; 

Answer 1

No, but you can get offsetWidth, which is probably what you want.

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

offsetWidth and offsetHeight

The width & height of the entire element, including borders and padding (excluding margins).

clientWidth and clientHeight

The width & height of the element including padding (excluding borders and margins)

See this fiddle for an example.

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

document.body.innerHTML += `
  clientWidth: ${elm.clientWidth} px
  

  scrollWidth: ${elm.scrollWidth} px
  

  offsetWidth: ${elm.offsetWidth} px`
  
  

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

If you use jQuery you have more options: width, innerWidth and outerWidth properties. http://api.jquery.com/category/manipulation/style-properties/