获取元素的内容宽度答案

【问题标题】：Get content width of an element获取元素的内容宽度
【发布时间】：2021-02-04 10:26:28
【问题描述】：

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

【问题讨论】：

【解决方案1】：

由于这在谷歌搜索时首先出现但还没有合适的答案，所以这里有一个：

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

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

基本上，我们首先得到元素的宽度，包括填充（clientWidth），然后左右减去填充。我们需要 parseFloat 填充，因为它们以 px-suffixed 字符串的形式出现。

我在CodePen 上为此创建了一个小操场，看看吧！

【讨论】：

【解决方案2】：

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

查看Determining the dimensions of elements 或specification itself。

【讨论】：

对不起，这两个似乎都和offsetWidth一样。
这些包括填充。
这是处理超出视口大小的内容的唯一答案。 +1

【解决方案3】：

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

或者：

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

【讨论】：

哦，还有一件事，我在我的问题中特别给出了这个选项。我正在寻找另一个。
从一开始就很重要。 ;-) 在这种情况下，是的：我认为你需要做一些减法。我在 jsbin 中添加了一个getWidth：jsbin.com/avedut/6/edit（最后的措辞让我有点失望，抱歉）

【解决方案4】：

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

var parent = document.getElementById('yourparentid');
var image = document.getElementById('yourimageid');
image.addEventListener('load'),function() {
    parent.scrollBy((image.width-parent.clientWidth)/2,(image.height-parent.clientHeight)/2);
}

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

【讨论】：