Is it right to get the width of an image using this code?

Question

document.getElementById("width").innerHTML = 'Width: ' + img.width;

Just writing this I got the result I wanted. But reading this I see that object.style.width is used to return the width of an image.

Questions:

Is my code right? Or should I have put the .style after the object?

Can someone explain why this worked without using .style after object?

Why should I use object.style.width instead of just object.width?

@NVRM the css (or more precisely the inline style) yes, but the question is about the width of the image. — t.niese, Dec 09 '21 at 13:49
Anyway, use this, see example https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle — NVRM, Dec 09 '21 at 14:03
Or [How to get image size (height & width) using JavaScript?](https://stackoverflow.com/q/623172/215552) — Heretic Monkey, Dec 09 '21 at 14:13
@HereticMonkey I haven't started studying jQuery yet. I will read this article after studying this. At the moment I'm doing exercises just using pure JavaScript (maybe I'm masochist or I'm doing the wrong thing but I think this will give me a solid base) — Corvo, Dec 09 '21 at 14:16
The answers to the questions @HereticMonkey mentioned are about both pure JavaScript and jQuery. You don't need to use jQuery for that (you rarely need jQuery nowadays at all). However, HereticMonkey is right about it being a duplicate. But I answered it because you asked specifically about the confusion related to the bad w3school article. — t.niese, Dec 09 '21 at 14:18
You are absolutely doing the right thing learning pure JavaScript before jQuery, by the way :). — Heretic Monkey, Dec 09 '21 at 14:20

score 1 · Answer 1 · answered Dec 09 '21 at 13:21

naturalWidth and naturalHeight will get you the natural dimensions, the dimensions of the image file.

offsetWidth and el.offsetHeight will get you the dimensions at which the element is rendered on the document.

const el = document.getElementById("width");

const naturalWidth = el.naturalWidth; // Only on HTMLImageElement
const naturalHeight = el.naturalHeight; // Only on HTMLImageElement
const offsetWidth = el.offsetWidth;
const offsetHeight = el.offsetHeight;

t.niese · Accepted Answer · 2021-12-09T14:09:25.253

On the linked w3schools site you have this statement:

Style width Property
document.getElementById("myBtn").style.width = "300px";
Definition and Usage
The width property sets or returns the width an element.

However, the part sets or returns the width an element is highly inaccurate and misleading, and that's one of the reasons why w3schools is considered a bad learning resource.

And this part at the end of the page if completely wrong:

Return the width of an <img> element:
alert(document.getElementById("myImg").style.width);

The obj.style.width returns the width property applied to an element through an inline style. But that could be nothing, a pixel value or a relative value.

Assuming img is an HTMLImageElement then img.width will give you the computed width of the element, so it can be different to the linked image resource.

naturalWidth gives the actual dimension of the image.

// wait for the image to be loaded otherwise to could be 0 if no width is enforce through styling
let img = document.querySelector('#img')

document.querySelector('#img').onload = () => {
  console.log('width using .width: ' + img.width) // width using .width: 350
  console.log('width using .naturalWidth: ' + img.naturalWidth)  // width using .width: 350
  console.log('width using .style.width: ' + img.style.width)  // width using .width: 
}

<img id="img" src="https://via.placeholder.com/350x150">

Another example for which.style.width might not return what you want.

let img1 = document.querySelector('#img1')
let img2 = document.querySelector('#img2')

img1.onload = () => {
  console.log('img1 width using .width: ' + img1.width) // img1 width using .width: 200
  console.log('img1 width using .naturalWidth: ' + img1.naturalWidth) // img1 width using .naturalWidth: 350
  console.log('img1 width using .style.width: ' + img1.style.width) // img1 width using .style.width: 
}


img2.onload = () => {
  console.log('img2 width using .width: ' +img2.width) // img2 width using .width: 200
  console.log('img2 width using .naturalWidth: ' + img2.naturalWidth) // img2 width using .naturalWidth: 350
  console.log('img2 width using .style.width: ' + img2.style.width) // img2 width using .style.width: 50%
}

#img1 {
   width: 50%;
}

.container {
   width: 400px;
}

<div class="container">
<img id="img1" src="https://via.placeholder.com/350x150">
<img id="img2" src="https://via.placeholder.com/350x150" style="width: 50%">
</div>

I instantiated an image to use as the background of a canvas: `var img = new Image();` `img.src = "images/cat;png";` In that case maybe it would have been better if I used `naturalWidth`, since as Ran Turner said , throught this I will get the dimensions of the image file? — Corvo, Dec 09 '21 at 13:34
I couldn't run this example you gave here, but in `console.log('img1 width using .width: ' + img1.width)` my return would be literally "50% or (or the width of image in pixels after decrease 50% of the width size)? This is happening because `.width` is taking the css style (or inline style)... — Corvo, Dec 09 '21 at 14:01
@Corvo added the output as a comment. And added a container around the images in the second example to have a consistent value. (`50%` is relative to where the image is located in). — t.niese, Dec 09 '21 at 14:10
Thank you! Now I get it. Just one last question: the return of 200 in `console.log('img1 width using .width: ' + img1.width)` is because the width is 200px after being reduced in 50%, right? — Corvo, Dec 09 '21 at 14:12
@Corvo The containere has a width of `400px` and `50%` of `400px` is `200`. — t.niese, Dec 09 '21 at 14:13

Is it right to get the width of an image using this code?

2 Answers2