0

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>

2
  • document.getElementsByClassName('FixedBox')[0].offsetWidth Commented Jun 8, 2016 at 11:10
  • or use an id selector
    – Himanshu
    Commented Jun 8, 2016 at 11:11

3 Answers 3

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>

5
  • I use it in code and get this console Uncaught TypeError: Cannot read property 'offsetWidth' of null
    – Me hdi
    Commented Jun 8, 2016 at 11:16
  • @Mehdi : in case there is no element with class name FixedBox , then it will fire the air Commented Jun 8, 2016 at 11:18
  • I want to call code after an element has been created.How is it?
    – Me hdi
    Commented Jun 8, 2016 at 11:52
  • Yes, it ok, but how is it befor load window it getting .FixedBox offsetWidth ?(Get width before load DOM)
    – Me hdi
    Commented Jun 8, 2016 at 12:31
  • @Mehdi : I don't think it's possible Commented Jun 8, 2016 at 12:33
1

Try This

document.getElementsByClassName('FixedBox')[0].offsetHeight
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>

6
  • I run it and get this: Uncaught TypeError: Cannot read property 'getBoundingClientRect' of undefined
    – Me hdi
    Commented Jun 8, 2016 at 11:47
  • I want to call code after an element has been created.How is it?
    – Me hdi
    Commented Jun 8, 2016 at 11:51
  • $(document).ready(function () { alert(document.getElementsByClassName('FixedBox')[0].getBoundingClientRect().width) });
    – wot
    Commented Jun 8, 2016 at 11:52
  • with javascript, it is as?: $('.FixedBox').ready(function() {alert(document.getElementsByClassName('FixedBox')[0].getBoundingClientRect().wid‌​th) }) ???
    – Me hdi
    Commented Jun 8, 2016 at 11:54
  • replace ready with load. $('.FixedBox').load(function () {alert(document.getElementsByClassName('FixedBox')[0].getBoundingClientRect().width)});
    – wot
    Commented Jun 8, 2016 at 11:55

Not the answer you're looking for? Browse other questions tagged or ask your own question.