Console.log не отображает width / height изображений?

Question

[Theory Theory]

<img src="https://en.js.cx/clipart/ball.svg" id="first" width="40">
<img src="https://en.js.cx/clipart/ball.svg" id="second">

console.log(first.clientWidth);          // 40
console.log(second.clientWidth);     // 0     ПОЧЕМУ???

alert(first.clientWidth);                    // 40
alert(second.clientWidth);               // 40

Если width явно указан, то conole.log работает
если нет, то не работает
А вот с alert проблем нет

И это происходит только с изображениями

Объясните, пожалуйста, что к чему??

Comments

[Kovalsky]

https://stackoverflow.com/questions/32438642/clien...

Answer 1

[FabiBoom]

До тех пор пока картинка не загружена о ее размерах не известно. В первом случае браузеру вы явно сообщаете о ширине и поэтому она доступна. Попробуйте так:

second.addEventListener('load', () => {
       console.log(second.clientWidth);
 });

Answer 2

[Wondermarin]

https://developer.mozilla.org/en-US/docs/Web/API/E...

The Element.clientWidth property is zero for inline elements

https://developer.mozilla.org/en-US/docs/Web/HTML/...

img is a replaced element; it has a display value of inline by default

Answer 3

[Andrew]

Мне кажется, вы подвираете
https://jsfiddle.net/kickerock/ewpbghor/