getting width of an element in JS not getting expected result for width

Question

$(parentelement).find(".spec-table__thead.spec-table__thead--original th p").each((function(index, element) {
  console.log($(element))
  console.log($(element)[0].clientWidth)
  i.push($(element)[0].clientWidth)
}));

I have the code above and the console returns:

But upon checking the inside of the $(element)

I can see :

className: ""
clientHeight: 47
clientLeft: 0
clientTop: 0
clientWidth: 585
contentEditable: "inherit"

meaning value that I should be getting is 585 but why do I get 696

FYI: using the first entry as sample.

You should create a snippet of your problem. As is, we can only guess. — Alexandre Elshobokshy
– Alexandre Elshobokshy, Commented Jan 26, 2021 at 9:59

Irfan wani · Accepted Answer · 2021-01-27 09:09:11Z

1

Actually this is not any error. It just changes because the console decreases the width of the viewable area. If you shift your console to the bottom, you will see that the results will be same.

Note that the clientWidth which you console logged is the right one, i.e, that is the width of the viewable portion of the element when the console is not open and the clientWidth present in the element which you console logged as whole is the viewable width when the console is open. That is why it is less than the first one.

answered Jan 27, 2021 at 9:09

Irfan wani

5,2822 gold badges32 silver badges49 bronze badges

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

4 Comments

guradio Over a year ago

actually im using the detached dev tools result are same .. i dont think it has something to do with that ?

Irfan wani Over a year ago

I checked it and was same in my case also i.e, different results but when i shifted the console to bottom, the results were same now. That was the only thing which changed it. It maybe some other problem in your case. You should add some code in the question containing those elements.

guradio Over a year ago

i see let me try changing to bottom and check

Irfan wani Over a year ago

As i said that was the thing which solved for me and also your code seems to be perfect as there is no logic or any other thing used. You are simply trying to get an attr value so it must not have errors.

Wajid · Accepted Answer · 2021-01-29 10:03:52Z

1

First you need to check which index have clientWidth. Because your response is not complete so I can't tell you which index have valid value. Check index like maybe it is on index 1 or any other

$(parentelement).find(".spec-table__thead.spec-table__thead--original th p").each((function(index, element) {
  console.log($(element))
  console.log($(element)[1].clientWidth)
  i.push($(element)[1].clientWidth)
}));

answered Jan 29, 2021 at 10:03

Wajid

5933 silver badges11 bronze badges

1 Comment

guradio Over a year ago

i dont see any diff on the OP i cant anyone would up

h34dsp1nns · Accepted Answer · 2021-02-01 22:59:42Z

0

My guess is that you are inspecting a different element than you are logging - maybe a padded container element. clientWidth should give you the width of the element.

You could double check against the boundingRect, but the values will surely be the same.

let boundingrect = element.getBoundingClientRect();
let clientWidth = element.clientWidth;
let boundingWidth = boundingrect.width;
let testWidth = boundingrect.right - boundingrect.left;
console.log(`client: ${clientWidth}, boundingwidth:${boundingWidth}, testWidth: ${testWidth}`);

answered Feb 1, 2021 at 22:59

h34dsp1nns

825 bronze badges

Comments

guradio · Accepted Answer · 2021-02-03 04:22:09Z

0

It turns out css is adding padding on the width

answered Feb 3, 2021 at 4:22

guradio

15.6k4 gold badges39 silver badges65 bronze badges

Collectives™ on Stack Overflow

getting width of an element in JS not getting expected result for width

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related