How get element width by javascript

Question

what's the JavaScript code for the find the 's width?

(I want get width .FixedBox whit javascript no jquery, but my code don't work.)

alert(document.getElementsByClassName('FixedBox').offsetWidth);

<div class="FixedBox">
    The HTMLElement.offsetWidth read-only property returns the layout width of an element. Typically, an element's offsetWidth is a measurement which includes the element borders, the element horizontal padding, the element vertical scrollbar (if present, if rendered) and the element CSS width.
</div>

document.getElementsByClassName('FixedBox')[0].offsetWidth — Madhawa Priyashantha
– Madhawa Priyashantha, Commented Jun 8, 2016 at 11:10

Pranav C Balan · Accepted Answer · 2016-06-08 12:22:16Z

2

The Document.getElementsByClassName() returns NodeList you need to get element from collection to get offsetWidth property. Also put them inside window load callback to execute only after elements are loaded.

window.onload = function() {
  var ele = document.getElementsByClassName('FixedBox');
  alert(ele.length ? ele[0].offsetWidth : 'no elements with the class');
}

<div class="FixedBox">
  The HTMLElement.offsetWidth read-only property returns the layout width of an element. Typically, an element's offsetWidth is a measurement which includes the element borders, the element horizontal padding, the element vertical scrollbar (if present,
  if rendered) and the element CSS width.
</div>

edited Jun 8, 2016 at 12:22

answered Jun 8, 2016 at 11:10

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

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

5 Comments

Me hdi Over a year ago

I use it in code and get this console Uncaught TypeError: Cannot read property 'offsetWidth' of null

Pranav C Balan Over a year ago

@Mehdi : in case there is no element with class name FixedBox , then it will fire the air

Me hdi Over a year ago

I want to call code after an element has been created.How is it?

Me hdi Over a year ago

Yes, it ok, but how is it befor load window it getting .FixedBox offsetWidth ?(Get width before load DOM)

Pranav C Balan Over a year ago

@Mehdi : I don't think it's possible

Pranav C Balan · Accepted Answer · 2016-06-08 12:22:28Z

1

Try This

document.getElementsByClassName('FixedBox')[0].offsetHeight

edited Jun 8, 2016 at 12:22

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

answered Jun 8, 2016 at 11:25

Ansh Takalkar

1191 silver badge9 bronze badges

Comments

wot · Accepted Answer · 2016-06-08 11:58:40Z

0

This might work

$('.FixedBox').load(function () {
    alert(document.getElementsByClassName('FixedBox')[0].getBoundingClientRect().width)
});

alert(document.getElementsByClassName('FixedBox')[0].getBoundingClientRect().width)

<div class="FixedBox">
  The HTMLElement.offsetWidth read-only property returns the layout width of an element. Typically, an element's offsetWidth is a measurement which includes the element borders, the element horizontal padding, the element vertical scrollbar (if present,
  if rendered) and the element CSS width.
</div>

edited Jun 8, 2016 at 11:58

answered Jun 8, 2016 at 11:23

wot

8454 silver badges10 bronze badges

6 Comments

Me hdi Over a year ago

I run it and get this: Uncaught TypeError: Cannot read property 'getBoundingClientRect' of undefined

Me hdi Over a year ago

I want to call code after an element has been created.How is it?

wot Over a year ago

$(document).ready(function () { alert(document.getElementsByClassName('FixedBox')[0].getBoundingClientRect().width) });

Me hdi Over a year ago

with javascript, it is as?:

$('.FixedBox').ready(function() {alert(document.getElementsByClassName('FixedBox')[0].getBoundingClientRect().wid‌th) })

???

wot Over a year ago

replace ready with load. $('.FixedBox').load(function () {alert(document.getElementsByClassName('FixedBox')[0].getBoundingClientRect().width)});

|

Collectives™ on Stack Overflow

How get element width by javascript

3 Answers 3

5 Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related