获取img的高
我们可以通过css设置图片的width,然后通过 clientWidth获取图片的宽,但是这个宽似乎是css里面定义的width值,但是对于图片的高,使用 clientHeight 来获取似乎是有些问题的 ,因为图片的高是由原始图片尺寸决定的。
快速获取图片的宽高还是为了预先做好排版样式布局做准备,那么如何获取img的宽高呢?
这样获取宽高是有问题的:
// 图片地址 后面加时间戳是为了避免缓存 var img_url = '?'+Date.parse(new Date()); // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 打印 alert('width:'+img.width+',height:'+img.height); // 打印 0
正确的获取方法(需要再img对象的 onload 方法里面获取):
// 图片地址 后面加时间戳是为了避免缓存 var img_url = 'https://images2018.cnblogs.com/blog/608987/201808/608987-20180819132826121-548913402.png?'+Date.parse(new Date()); // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 加载完成执行 img.onload = function(){ // 打印 alert('width:'+img.width+',height:'+img.height); };
参考地址:js获取img宽高
未来的自己若是充满勇气,一定会感谢今日的孤独。