CODEWITHSUNDEEP
javascript
Mirajul Momin
Mirajul Momin

Reputation: 177

How can I get the size of images by javascript?

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:

  1. Why does the code work well when I execute it by clicking a button?
  2. 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>

Upvotes: 0

Views: 75

Answers (2)

vipatron
vipatron

Reputation: 176

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?

Upvotes: 1

Sumesh TG
Sumesh TG

Reputation: 2575

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.

Upvotes: 2

Related Questions