用Javascript测量div的宽度

Question

I have two questions. The more important one is how can I measure the width of a div? Not to get the CSS value, but in px or ems or so on. Right now I'm doing it like this

document.getElementById("menu").addEventListener("click", GetWidth);
function GetWidth() {
var ulObject=document.querySelector(".dropdown-menu");
var obtainedStyle=window.getComputedStyle(ulObject);
var ulWidth=obtainedStyle.getPropertyValue("width");
console.log(ulWidth);
}

It works to a point. The problem is that the property of width is set to auto, but might change. How do I get it in any usable value?
The second question is how can I make an event handler but with a class? The querySelector and getElementByClassName didn't work.
I would rather avoid jQuery for now, but if it's the only option I'll take it. The answer given in How do I retrieve an HTML element's actual width and height? doesn't work. Even though I have no display:none; the offsetWidth still shows 0.

Answer 1

Use getBoundingClientRect :

var rect = ulObject.getBoundingClientRect();
var ulWidth = rect.width;

If you need to support IE8 and previous, you can use

var ulWidth = rect.right - rect.left;