outerWidth没有jquery

Question

可以使用dom获取元素outerWidth吗？

Ej：

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

Answer 1

不，但你可以得到offsetWidth，这可能是你想要的。

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

offsetWidth 和 offsetHeight

  

宽度和宽度整个元素的高度，包括边框和   填充（不包括边距）。

clientWidth 和 clientHeight

  

宽度和宽度元素的高度，包括填充（不包括   边框和边距）

有关示例，请参阅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/

Answer 2

Sean为externalWidth（）提供了完美的解决方案。

补充一下，如果您要替换任何或所有jQuery维获取器，请参见下面的解决方案。

注意：即使使用* { box-sizing: border-box }

，这也可以提供正确的尺寸

getWidth(el, type) {
  if (type === 'inner')  // .innerWidth()
    return el.clientWidth;
  else if (type === 'outer')  // .outerWidth()
    return el.offsetWidth;
  let s = window.getComputedStyle(el, null);
  if (type === 'width')  // .width()
    return el.clientWidth - parseInt(s.getPropertyValue('padding-left')) - parseInt(s.getPropertyValue('padding-right'));
  else if (type === 'full')  // .outerWidth(includeMargins = true)
    return el.offsetWidth + parseInt(s.getPropertyValue('margin-left')) + parseInt(s.getPropertyValue('margin-right'));
  return null;
}