1

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.

Community
  • 1
  • 1
Alex Ironside
  • 4,658
  • 11
  • 59
  • 119
  • 1
    Have a look at [getBoundingClientRect()](https://developer.mozilla.org/en/docs/Web/API/Element/getBoundingClientRect), however, `width` and `height` are not returned in IE8 and below – haxxxton Jan 25 '17 at 00:18
  • I believe you look for`offsetWidth` https://msdn.microsoft.com/en-us/library/ms534304(v=vs.85).aspx – G-Cyrillus Jan 25 '17 at 00:19
  • Do not ask multiple questions simultaneously. For the first question: try [`getBoundingClientRect`](http://stackoverflow.com/questions/294250/how-do-i-retrieve-an-html-elements-actual-width-and-height). For the second one: `getElementByClassName` doesn’t exist, keep in mind that the actual `getElementsByClassName` returns an `HTMLCollection`, not a single element. `querySelector` should work, but you didn’t show us the code. – Sebastian Simon Jan 25 '17 at 00:19
  • Possible duplicate of [How do I retrieve an HTML element's actual width and height?](http://stackoverflow.com/questions/294250/how-do-i-retrieve-an-html-elements-actual-width-and-height) – Sebastian Simon Jan 25 '17 at 00:20
  • offsetWidth didn't work. It yells it's 0. getBoundingClientRect doesn't work either. I didn't give the code, because the HTML is over 200 lines. – Alex Ironside Jan 25 '17 at 00:32
  • I've read that display:none might make it show 0. Do you have any other ideas what might break it? – Alex Ironside Jan 25 '17 at 01:09
  • @alex3wielki You can't say they "don't work" just because they give you a value that you don't expect. Those functions are *supposed* to return 0 under certain conditions, for example as other mentioned if the element is hidden. So maybe your dropdown element is hidden when the width is inspected, or maybe you're selecting the wrong element. Hard to tell from that snippet, you have to create a meaningful demo. What do you mean with "what might break it"? "Break" what? – MaxArt Jan 25 '17 at 07:44
  • Make the function work in a way I didn't want it to work ;) – Alex Ironside Jan 29 '17 at 19:01

1 Answers1

0

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;
MaxArt
  • 22,200
  • 10
  • 82
  • 81