Get equivalent innerWidth () without jQuery

Question

I'm currently working on removing jQuery from the code I wrote, and I have a piece of code in which I calculated the inner and outer width of some elements span. It seems to work just .getBoundingClientRect()fine for getting the outer width of an element, but I'm a little stuck in getting the inner width. (i.e. element width without padding and borders).

I use d3 to create my spacing, and I need to calculate their inner width so that I can effectively set the width of some other elements to make them line up. Is there a good way to get the inner width for a div without manually checking and subtracting the various .css properties that might affect it?

Answer 1

Not sure how stable this is, but a method that seems to work is using window.getComputedStyle(element).width.

This gives a computed style like "95px", where 95 is the internal width (in pixels). I use parseInt(window.getComputedStyle(element).width)to get the inner width of an element as a number.

Answer 2

You can try it .offsetWidth. Here's the fiddle .