2019-04-24 如何获取图片，元素的真实宽高

获取图片真实宽高

可以利用image对象获取图片的宽高

var img_url= 'https://www.2345.com/i/search180926/idx-1.png'
var img= new image()  //创建image对象
img.src= img_url  //改变src
img.onload= function(){    //图片加载完成，否则得到宽高为0
      console.log( 'width:'+img.width+',height:'+img.height)
// 输出"width:120,height:40"

获取元素的真实宽高

• 嵌入式样式表（写在head里或.css文件里）：这种情况通过div.style.width拿不到宽度，而通过div.offsetWidth才可以获取到宽度。
• 宽和高是写在行内中的，即内联样式，比如style="width:120px;"这种情况通过上述2种方法都可以得到宽度。

方法一：使用DOM

document.getElementById("id").style.height  
document.getElementById("id").offsetHeight
document.getElementById("id").clientHeight

方法二： 使用getComputedStyle

var dom= document.getElementById('id')
var style=  window.getComputedStyle(dom,":after")
console.log('height:'+style.height+',width:'+style.width)

方法三： jQuery