为什么image的宽高可以直接获取而不用.style??

今天看一段代码，突然对一行代码产生了疑问，那就是为什么在获取image对象后，可以直接img.width来获取image的宽高，下面以代码为例来慢慢解释

 <img src="./img/balloon.jpg" alt="" id='img'>
   <script>
       //获取图片对象
       var img = document.getElementById('img')
       console.log(img.width) //0
       console.log(img.height)  //0
   </script>

image.png

在获取image元素对象后，直接打点img.width、img.height输出结果为0，这是为什么呢，这不是与我的标题矛盾了？？,其实是因为图片是异步加载的，就是说图片的加载和console.log()语句是同时进行的，但是图片的加载需要耗时，而conosle.log()语句执行很快，所以在控制台输出结果的时候，图片还没加载完成，所以输出结果为0，现在不要刷新刚才的浏览器，手动在控制台输入img.width,然后回车

image.png
现在可以看到，结果不再为0，而且结果没有带px,因为此时图片已经加载完成了，所以可以将刚才的代码稍加改动即可

<img src="./img/balloon.jpg" alt="" id='img'>
   <script>
       //获取图片对象
       var img = document.getElementById('img')
       img.onload = function(){
        console.log(img.width) //500
        console.log(img.height)  //500
       }

上面的代码中，我将输出语句放在了img.omload方法中，也就是在图片加载完毕后再执行输出语句

那么到底为什么图片可以直接获取width和height呢？因为我记得平时都是元素对象.style.width,其实原因很简单，因为。。。。。。。图片本来就有宽高。。。呃呃呃。。。尴尬

image.png

说完不打点的，我们再来说说打点的，注意：元素对象.style.width这种方法只能获取元素的行内样式哦,看下面的代码

//css代码
<style>
        div{
                width: 200px;
                height: 200px;
        }
    </style>
//Html和Js代码
<div id="box"></div>
   <script>
       var box = document.getElementById('box')
       console.log(box.style.width) //空白
   </script>

image.png
控制台输出空白，因为元素对象.style.width只能获取行内样式，而我写的是嵌入式，所以获取不到，我们改下代码

<div id="box" style="width:100px;height:100px"></div>
   <script>
       var box = document.getElementById('box')
       console.log(box.style.width) //100px
   </script>

我将样式写在了行内，就可以获取了，同样的，通过元素对象.style.width='100px'这样设置的样式也是行内样式

<div id="box"></div>
   <script>
       var box = document.getElementById('box')
       box.style.width = '100px'
       box.style.height = '100px'
       console.log(box.style.width) //100px
   </script>

image.png