获取元素的内容宽度

Question

offsetWidth对我来说不够好，因为这包括填充和边框宽度。我想找出元素的内容宽度。是否有一个属性，或者我必须采用offsetWidth然后从计算样式中减去填充和边框宽度？

Answer 1

由于这是谷歌搜索时首先出现但尚未找到合适的答案，这里有一个：

function getContentWidth (element) {
  var styles = getComputedStyle(element)

  return element.clientWidth
    - parseFloat(styles.paddingLeft)
    - parseFloat(styles.paddingRight)
}

基本上，我们首先得到元素的宽度，包括填充（clientWidth），然后左右填充填充。我们需要parseFloat填充，因为它们是px - 后缀字符串。

我已在CodePen创建了一个小游乐场，请查看！

Answer 2

听起来我想要在元素上使用getComputedStyle。您可以在此处查看getComputedStyle与offsetWidth的示例：http://jsbin.com/avedut/2/edit

或者：

window.getComputedStyle(document.getElementById('your-element')).width;

Answer 3

我有类似的问题，我的父元素不是窗口或文档...我正在通过 Javascript 加载图像并希望它在加载后居中。

Columns=80000

每当您设置 src 时，它就会滚动到图像的中心。这对我来说是在放大图像的高分辨率版本的情况下。

Answer 4

我建议使用scrollWidth或clientWidth，具体取决于您是否要考虑滚动条。

结帐Determining the dimensions of elements或specification itself。