Notice I'm using getBoundingClientRect() and accessing three of its properties: left, top, and width. The returned object has six read-only properties: the ones already mentioned, along with height, right, and bottom. The values returned would be numbers representing those properties in pixels.

Notice the code also has an if/else branch. Because IE6-8 don't support the width property on getBoundingClientRect(), we instead use "offsetWidth" to get the same value for those browsers.

All in-use browsers support getBoundingClientRect(), so as long as you account for the lack of support for width in old IE, you can use this safely in any project. In fact, this is yet another feature that was introduced first in Internet Explorer as far back as version 4.

And if you're wondering, the resulting coordinates will take any CSS transform values into consideration when returning the various values in the getBoundingClientRect() object, so that's pretty cool.

More info see getBoundingClientRect() on MDN. And if you want to fiddle with this method, here's a JS Bin that displays the coordinates and width of a container element. You can change the parameter on the last line to get the coordinates and width of one of the other elements on the page.