javascript - 没有 jquery 的 outerWidth

Question

是否可以使用dom获取元素outerWidth？

Ej:

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

Answer 1

没有，但你可以获得 offsetWidth，这可能是你想要的。

来自 http://www.quirksmode.org/dom/w3c_cssom.html

offsetWidth 和 offsetHeight

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

clientWidth 和 clientHeight

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

参见 this fiddle举个例子。

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>

如果您使用 jQuery，您有更多选择:width、innerWidth 和 outerWidth 属性。 http://api.jquery.com/category/manipulation/style-properties/