獲取元素的內容寬度

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

根據您是否要考慮滾動條，我建議使用scrollWidth或clientWidth 。

查看確定元素的尺寸或規范本身。

Answer 3

在我看來，您想在元素上使用getComputedStyle 。 您可以在此處查看getComputedStyle與offsetWidth的示例： http : offsetWidth

要么：

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

Answer 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 時，它將滾動到圖像的中心。 這對我來說是在放大圖像的高分辨率版本的情況下。