Getting the width of child element pure javascript

Question

Html:

<div class="project-box">
 <img src="img/ifix.jpg" class="thumbnail img-responsive">
   <div class="hover-box">
     <h2>TITLE</h2>
     <p>Description of title</p>
   </div>
 </div>

javascipt:

window.onload = function(){

var project = document.getElementsByClassName('project-box');
img = project.getElementsByTagName('img');
  alert(img.clientWidth); 
};

I'm trying to get the img width and eventually the img height using pure JavaScript I know this is a lot easier with jQuery but I want to do it using only JavaScript. EDIT: I realized I was not specifying the array for the img and project

working js:

window.onload = function(){

var project = document.getElementsByClassName('project-box');
img = project[0].getElementsByTagName('img');
 alert(img[0].offsetWidth);
};

Try img.clientWidth.

Travesty3
– Travesty3

2013-11-13 03:03:51 +00:00
Commented Nov 13, 2013 at 3:03 — Travesty3
– Travesty3, Commented Nov 13, 2013 at 3:03

Arun P Johny · Accepted Answer · 2013-11-13 03:17:44Z

3

Both getElementsByClassName and getElementsByTagName returns an array of objects, so you need to access the actual element by its index then call its methods/properties

window.onload = function () {
    var project = document.getElementsByClassName('project-box')[0];
    var img = project.getElementsByTagName('img')[0];
    alert(img.clientWidth);
};

Demo: Fiddle

answered Nov 13, 2013 at 3:17

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

1 Comment

swsa Over a year ago

thank you I relized this right before reading your answer so I did it a bit different but still works I gave you the check since its still the correct solution

Gino · Accepted Answer · 2013-11-13 03:11:02Z

1

I believe project.getElementsByTagName('img'); is returning an array, even if it only has one object.

Try something like

window.onload = function(){

var project = document.getElementsByClassName('project-box');
img = project.getElementsByTagName('img');
  alert(img.pop().width); //This should remove the element from the array and then call width
};

answered Nov 13, 2013 at 3:11

Gino

1311 bronze badges

2 Comments

swsa Over a year ago

there are several of the project-box and img i tried adding img[0].width but still no result

Gino Over a year ago

Oh! I just realized you aren't declaring the variable img.

StaleMartyr · Accepted Answer · 2013-11-13 03:04:12Z

0

Try this one:

alert(img.clientWidth);

answered Nov 13, 2013 at 3:04

StaleMartyr

7785 silver badges18 bronze badges

1 Comment

StaleMartyr Over a year ago

Sorry, i realized that img is an array of elements, it must be img[0].clientWidth

Jacob Mulquin · Accepted Answer · 2013-11-13 03:28:26Z

0

The reason this is not working is because .getElementsByClassName() and .getElementsByTagName() both wrap elements inside an [object HTMLContainer], you need to select the first element from each of these objects.

This code should work:

window.onload = function()
{
    var project = document.getElementsByClassName('project-box');
            img = project[0].getElementsByTagName('img');

    console.log(img[0].clientWidth);
};

answered Nov 13, 2013 at 3:28

Jacob Mulquin

3,6081 gold badge22 silver badges24 bronze badges

Collectives™ on Stack Overflow

Getting the width of child element pure javascript

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related