How can I get the size of images by javascript?

Question

I am trying to get image size by javascript, for that I used offsetHeight, scrollHeight, clientHeight but none of these worked. The naturalHeight property worked but it return the actual size of image even if the image is resized by css. Strangely if I click the try button then the same code work well. Where did i wrong?
Please explain:

Why does the code work well when I execute it by clicking a button?
How can I get the image size when it is resized by css or screen size?

var imageHeightMethodOne = document.querySelector('.one').offsetHeight;
console.log('MT1-The height of img is ' + imageHeightMethodOne);
var imageHeightMethodTwo = document.querySelector('.one').scrollHeight;
console.log('MT2-The height of img is ' + imageHeightMethodTwo);
var imageHeightMethodThree = document.querySelector('.one').clientHeight;
console.log('MT3-The height of img is ' + imageHeightMethodThree);
var imageHeightMethodFour = document.querySelector('.one').naturalHeight;
console.log('MT4-The height of img is ' + imageHeightMethodFour);

function test() {
  var imageHeightMethodOne = document.querySelector('.one').offsetHeight;
  console.log('MT1-The height of img is ' + imageHeightMethodOne);
  var imageHeightMethodTwo = document.querySelector('.one').scrollHeight;
  console.log('MT2-The height of img is ' + imageHeightMethodTwo);
  var imageHeightMethodThree = document.querySelector('.one').clientHeight;
  console.log('MT3-The height of img is ' + imageHeightMethodThree);
  var imageHeightMethodFour = document.querySelector('.one').naturalHeight;
  console.log('MT4-The height of img is ' + imageHeightMethodFour);
}

<div class='container' style='width:40%;'>
  <img class='one' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT6K8uN-QjZpaY10m_SQvqnwXDr8vqQijLi_XhZrJqSLDkMz5vvag' style='width:100%;height:auto;' />
</div>
<button onclick='test()'>try</button>

Is your script run before the layout is ready? See https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded and try to run the script inside an event handler. — Sami Hult, Oct 04 '18 at 12:15

score 2 · Accepted Answer · answered Oct 04 '18 at 12:15

function test() {
  var imageHeightMethodOne = document.querySelector('.one').offsetHeight;
  console.log('MT1-The height of img is ' + imageHeightMethodOne);
  var imageHeightMethodTwo = document.querySelector('.one').scrollHeight;
  console.log('MT2-The height of img is ' + imageHeightMethodTwo);
  var imageHeightMethodThree = document.querySelector('.one').clientHeight;
  console.log('MT3-The height of img is ' + imageHeightMethodThree);
  var imageHeightMethodFour = document.querySelector('.one').naturalHeight;
  console.log('MT4-The height of img is ' + imageHeightMethodFour);
}

<body onload="test();">
<div class='container' style='width:40%;'>
  <img class='one' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT6K8uN-QjZpaY10m_SQvqnwXDr8vqQijLi_XhZrJqSLDkMz5vvag' style='width:100%;height:auto;' />
</div>
<button onclick='test()'>try</button>
</body>

Call the function in the onLoad event. This will ensure the assets of the page have loaded, including images,css.

score 1 · Answer 2 · answered Oct 04 '18 at 12:18

1

1: by that time, the page has been loaded and the browser has painted the layout, so sizes exist.

2: Duplicate Question.

Google Query: dom image height

Top Result: How to get image size (height & width) using JavaScript?

answered Oct 04 '18 at 12:18

vipatron

166
1
8

How can I get the size of images by javascript?

2 Answers2