Can't get 'width' attribute of an element with JS

Question

I can't get the 'width' attribute of an element:

console.log(document.querySelector('.container').width)

    <div class="container" width="55"> 


    </div>

This returns "undefined", other attributes like "id" I can get this way, but not width and height. I find this problem so silly, why doesn't it work? Even here they write it should work: https://www.w3schools.com/jsref/prop_object_width.asp

I don't need any workarounds like with jQuery or outerWidth, etc. I just need to get the width and height attributes from the element.

Edit: My actual problem is with SVG element, but with DIV it also doesn't work.

Are you trying to get the actual width, or the value inside the width attribute? (which is a legacy option on divs and may or may not have any effect on layout) — DBS
– DBS, Commented Apr 13, 2021 at 15:08
I need to get whatever is put into width="" in the html, not the actual width, not the styles width, only the exact value that is put into HTML. — prk_001
– prk_001, Commented Apr 13, 2021 at 15:12
Does this answer your question? How do I retrieve an HTML element's actual width and height? — Nora
– Nora, Commented Apr 13, 2021 at 15:22
Unfortunately it doesn't. I need to get data stored in width attribute, not to get actual width. — prk_001
– prk_001, Commented Apr 13, 2021 at 15:28

DBS · Accepted Answer · 2021-04-13 15:13:40Z

4

You are looking for Element.getAttribute() (Documentation)

console.log(document.querySelector('.container').getAttribute('width'))

<div class="container" width="55"></div>

answered Apr 13, 2021 at 15:13

DBS

10.1k4 gold badges40 silver badges61 bronze badges

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

4 Comments

prk_001 Over a year ago

Thank you, yes this would work. But this doesn't have good enough support. I'd need something that works good on desktop and mobile. I thought that I can get any attribute of an element just by the . (dot), I am very suprised this doesn't work

DBS Over a year ago

It should be supported everywhere, it's been around since IE5. Is there a specific situation where it's not working?

Nora Over a year ago

Not good enough support? It's been around forever and is supported by all modern engines.

prk_001 Over a year ago

Well I used to consider lack of Opera Mini support as not enough support. But, maybe it's time to leave it for e-commerce, after all nobody would buy anything by Opera Mini. So I will probably use getAttribute(). But do you know why doesn't it work? Why all the internet writes about taking width attribute this way (I'd say this standard way), but it actually doesn't work.

Collectives™ on Stack Overflow

Can't get 'width' attribute of an element with JS

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related