How to get the width and height attributes from the image tag?

Question

I have the following image tag

<img class="someclass" src="somesrc" width="220" height="165" />

The browser is displaying the image with its original width and height which is 480x360

I want to get the image width and height attributes from the image tag which should return 220 and 165

I have tried the following

var img = document.getElementsByClassName('someclass');
console.log(img.clientWidth);
console.log($('.someclass').attr('width'));

But it returns me undefined.

The following code returns me the actual width and height of the image. which is 480

$('.someclass').width();

Is there any way that it should return the 220 and 165?

@VSO - `getElementsByClassName` returns a **nodeList**, not a single element — adeneo, Nov 28 '16 at 14:33
@VSO: See http://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method — T.J. Crowder, Nov 28 '16 at 14:33
@VSO - `getElementsByClassName` returns multiple elements, hence get Element**s** :) — Nope, Nov 28 '16 at 14:33
hope you are including jquery. it should work without any issue — Deep, Nov 28 '16 at 14:34

score 3 · Answer 1 · answered Nov 28 '16 at 14:44

You need to get the width attribute of a single element not a nodeList as you were returning.

Try this...

var element = document.querySelector('.someclass');
console.log(element.getAttribute('width')); //220
console.log(element.getAttribute('height')); //165

score 0 · Accepted Answer · answered Nov 29 '16 at 07:48

Thanks to all for your help. But I have found the solution. The following code works for me.

$('img.someclass).load(function(){
  var width = $(this).attr('width');
  var height = $(this).attr('height');
  if(width != 'undefined') {
     $(this).css('width', width);
  }
  if(height != 'undefined') {
    $(this).css('height', height);
  }
});

Antonis · Answer 3 · 2016-11-28T15:00:21.257

-2

Try

var img = document.getElementsByClassName('someclass')[0];
var width = img.width;
var height = img.height

and in case you want to set new values just do:

img.width = yourvalue;
img.height = yourvalue;

it works fine, so plz don't downvote people for no reason

edited Nov 28 '16 at 15:00

answered Nov 28 '16 at 14:50

Antonis

647
6
15

You misread the question he is after the attribute value not the rendered width / height – curv Nov 28 '16 at 15:06

How to get the width and height attributes from the image tag?

3 Answers3