Get content width of an element

javascript

Solution

Since this comes up first when googling but doesn't have an appropriate answer yet, here's one:

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

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

Basically, we first get the element's width including the padding (`clientWidth`) and then substract the padding left and right. We need to `parseFloat` the paddings because they come as `px`-suffixed strings.

I've created a little playground for this on CodePen, check it out!

Problem

`offsetWidth` isn't good enough for me right now, as this includes padding and border width. I want to find out the content width of the element. Is there a property for that, or do I have to take the offsetWidth and then subtract the padding and border width from the computed style?

Original source