jQuery获得图片宽高的方法
jQuery是一个优秀的JavaScript库，它可以方便地操作HTML文档，并提供许多实用的功能。其中，获得图片宽高是常常会用到的一个操作，本文将介绍怎样使用jQuery获得图片的宽高。
方法一：使用jQuery的width()和height()方法
jQuery的width()和height()方法是最经常使用的获得元素宽高的方法，其中，width()可以获得元素的宽度，height()可以获得元素的高度。通过在选择器中指定图片元素的ID或class，就能够轻松地获得图片的宽高。以下是示例代码：
$(document).ready(function(){
varwidth=$('image').width();//获得图片宽度
varheight=$('image').height();//获得图片高度
console.log('width:'+width+',height:'+height);
});上述代码中，选择器指定了ID为“image”的图片元素，然后分别使用width()和height()方法获得图片的宽高，最后将宽高信息输出到控制台。
方法二：使用jQuery的prop()方法
除width()和height()方法之外，还可使用jQuery的prop()方法来获得图片宽高。prop()方法可以获得或设置元素的属性值，其中，width和height属性对应着元素的宽度和高度。以下是示例代码：
$(document).ready(function(){
varwidth=$('image').prop('width');//获得图片宽度
varheight=$('image').prop('height');//获得图片高度
console.log('width:'+width+',height:'+height);
});上述代码中，一样是通过选择器指定ID为“image”的图片元素，然后使用prop()方法获得图片的宽高，并将结果输出到控制台。
方法三：使用JavaScript的naturalWidth和naturalHeight属性
其实在JavaScript中，也有一种获得图片宽高的方法，那就是使用HTML5新增的naturalWidth和naturalHeight属性。在图片加载完成后，可以通过访问这两个属性获得图片的实际宽高。以下是示例代码：
$(document).ready(function(){
varimage=newImage();
image.src='example.jpg';//图片的URL
image.onload=function(){
varwidth=this.naturalWidth;//获得图片宽度
varheight=this.naturalHeight;//获得图片高度
console.log('width:'+width+',height:'+height);
};
});上述代码中，通过创建一个新的Image对象，设置图片的URL并加载图片。在图片加载完成后，可以通过访问this对象的naturalWidth和naturalHeight属性获得图片的实际宽高。
总结
上述三种方法都可用于获得图片的宽高，具体选择哪一种方法取决于场景和需要。需要注意的是，图片的宽高信息只有在图片加载完成后才能获得到，因此需要在图片加载完成后再进行宽高的获得操作。
桂&哥&网&络www.guIgEge.cn
1对1专业客服
24小时服务支持
365天无间断服务
5分钟快速响应TOP
