JavaScript: How to get a dynamically created element's width?

Question

I'm a JavaScript novice. Have patience with me.

I searched this site for relevant questions and found two: How to get width of a dynamically created element with $comiple in Angularj and jQuery + CSS. How do I compute height and width of innerHTML?. Their relevance and their answers are discussed below. If I missed a relevant question and this is a duplicate question, please direct me to it.

I dynamically create a <div class="popup"> (call it "popup"), populate it with innerHTML from a display: none; <div> in the markup, and insert it on the page. The relevant CSS is:

.popup {
   top: 0;
   left: 0;
   width: 200px;
   height: 250px;
 }

Using event.clientX, I position popup relative to the cursor position at the time the mouseover event fired, as follows:

var widthOffset = 75, heightOffset = 0;
var windowWidth, popupWidth;
// other code ...
windowWidth = $(window).width();
popupWidth = 200;   // popup.style.width returns nothing (not null,
                    // not undefined, just nothing).
// when event.clientX is in the left half of the window, display popup
// offset to the right of clientX;
// when clientX is in the right half, display popup offset to the left.
if( event.clientX > windowWidth/2 ){ widthOffset = -(widthOffset + popupWidth);}
popup.style.top = event.clientY - heightOffset + "px";
popup.style.left = event.clientX + widthOffset + "px";

There is a working reduced case at the Pen Popup Project Reduced Case on CodePen.

The problem is that I want to programmatically obtain popupWidth not set it as a fixed quantity. But, as the comment states,

popupWidth = popup.style.width;

is nothing. (Maybe it's a null string: popupWidth === "". I'm uncertain.)

The answer to the first question referenced above said to insert popup into the DOM before trying to obtain its width. I have done this. (See the Pen.) Still, it doesn't work.

A comment to the second answer to the second question said:

the root issues is that height cannot be set on an element with display:none.

I had display: none but when I changed it to display: block, and set popupWidth = popup.style.width;, popup "stuttered" fiercely on mouseover.

So the question remains: How do I programmatically get popupWidth just as I did with windowWidth?

Is there any particular reason you're not using jQuery functions, which you seem to have included in your code pen? — Jhecht
– Jhecht, Commented May 7, 2016 at 6:06
Well, yes. I don't know JQuery. Researching the question "how to obtain window width" led me to the answer, the JQuery function $(window).width(). Through more research, I learned how to include JQuery in the .js file. That's the full extent of my JQuery knowledge. Could you provide a specific answer? — alxfyv
– alxfyv, Commented May 7, 2016 at 7:06

alxfyv · Accepted Answer · 2016-05-08 05:41:39Z

4

With help from @Redu and @torazaburo, the answer became clear.

popupWidth = popup.offsetWidth; is the correct statement but both these conditions must be true:

popup must have been inserted into the DOM, and
display: block; must have been set.

If popup is still in memory or display: block; has not been set, then popup.offsetWidth === 0. If both of the conditions are true, then popup.offsetWidth is equal to the width set in the CSS.

Thanks to both commenters for their help.

answered May 8, 2016 at 5:41

alxfyv

3892 gold badges6 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Redu · Accepted Answer · 2016-05-07 07:54:29Z

1

You can do like

var popupDiv = document.getElementsByClassName("popup")[0],
       width = window.getComputedStyle(popupDiv).width;

If you deal with a window or document type of element then getElementsByClassName(element,null), element.offsetWidth or element.clientWidth doesn't work. You have to access the width value like

var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

edited May 7, 2016 at 7:54

answered May 7, 2016 at 5:45

Redu

26.3k6 gold badges61 silver badges84 bronze badges

9 Comments

user663031 Over a year ago

Why would I do this instead of using offsetWidth?

alxfyv Over a year ago

@Redu tried your solution but got a console error message: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.Which seems strange because

document.getElementsByClassName() returns an element. Any further comments? (Sorry for the runon paragraph. I haven't figured out how to get multiparagraph comments. When I hit

return`, the editor just submits the comment.)

Redu Over a year ago

Well i guess you are dealing with a window type element. getComputedStyle(window), window.offsetWidth or window.clientWidth won't work on the window elements. You probably need to use something like var width = window.innerWidth

alxfyv Over a year ago

@torazaburo Could you explicate please? I'm lost at offsetWidth.

user663031 Over a year ago

I mean that popupDiv.offsetWidth will give the width of the element.

|

Collectives™ on Stack Overflow

JavaScript: How to get a dynamically created element's width?

2 Answers 2

Comments

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related