CODEWITHSUNDEEP
javascripthtmlcss
Paweł Audionysos
Paweł Audionysos

Reputation: 606

Get HTML element size

I spend couple of hours to try to get width of my div container. I read many questions and answers but none of them seem to work in my case - I always got 0. Finally I found that I can get it through scrollWidth property which wasn't even mentioned in this question and similar. Now I have what I wanted by I still have no idea how this works.

Why all the other methods fail? Why this is named scrollWidth? I don't want to scroll anything - it's so confusing. Can I get the size of an element before I append it to a document - even scrollWidth don't work in that case. Is there any model I should follow to always get what I see on the screen? I can't see any patterns right now, I write someting, see something different on the screen, and get something even more different in the output. Every time I want to do someting it seem to be 10 different methods I can use but usually only one or two work because it depends on which methods I used earlier. When i work with 2d graphics I used to have x,y,width and height but in html I allways got those smarty CSS which seem to know better what I want to do. Sorry if this sound a little officious but I'm a little annoyed when i need to spend so much time on a trivial task like this. I use to draw graphic on canvas and it was much simpler but now I want to make a simple website so it's probably not a good idea to build it this way.

Here is my example

I understand that i get 0 size becouse those properties refer to element independently of its children and my container has 0,0 size, right? I read that if I set display: inline-block; style it will adapt size to match its children automatically - why this in not working?

Upvotes: 2

Views: 520

Answers (2)

Steven Anderson
Steven Anderson

Reputation: 8498

The container element in fact has no width. This is why you are getting widths of zero. You can see this if you use dev tools element inspector.

The reason for it being that the container element is absolutely positioned and has no set width. Your child elements are also position: absolute and therefore they will not force the container element to 'grow' to their size.

To get the visible width of the menu, instead you could total up the widths of all the child elements (the first-level menu items). This is probably the best approach to use for the way you currently have things set up. Otherwise, I would suggest completely changing your approach with the html elements you are using, to the CSS properties you are using to position elements where it would not be required to use position: absolute.

I would advise you to open up your dev tools element inspector and start looking at how things react when you change the position from 'absolute' to 'relative'.

Understanding how to position elements and how widths/heights are affected using CSS will save you a lot of headaches - like the one you are having now :)

Upvotes: 2

Akjm
Akjm

Reputation: 53

document.getElementById("mydiv").offsetWidth

This will return the width, including padding.

Upvotes: 1

Related Questions