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?
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>
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?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)...
50% is relative to where the image is located in).console.log('img1 width using .width: ' + img1.width) is because the width is 200px after being reduced in 50%, right?400px and 50% of 400px is 200.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;
img.style.width