正文

轻松掌握：JavaScript获取图片宽度的5种实用方法

/0 浏览量
0604

在网页开发中，我们经常需要获取图片的宽度来进行布局或样式调整。JavaScript 提供了多种方法来获取图片的宽度，以下将详细介绍五种常用的方法。

方法一：使用 img 元素的 width 属性

这是最直接的方法，通过访问 img 元素的 width 属性即可获取图片的宽度。

var img = document.getElementById('myImage');
var width = img.width;
console.log('图片宽度：' + width + 'px');

方法二：使用 getBoundingClientRect() 方法

getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。通过这个方法，我们可以获取图片的宽度。

var img = document.getElementById('myImage');
var rect = img.getBoundingClientRect();
var width = rect.width;
console.log('图片宽度：' + width + 'px');

方法三：使用 CSS 样式计算

我们可以通过计算 CSS 样式来获取图片的宽度。这种方法适用于图片已经加载到页面上的情况。

var img = document.getElementById('myImage');
var style = window.getComputedStyle(img);
var width = parseInt(style.width);
console.log('图片宽度：' + width + 'px');

方法四：使用 Image 对象

创建一个 Image 对象，并设置其 src 属性为图片的 URL。当图片加载完成后，我们可以通过访问 width 属性来获取图片的宽度。

var img = new Image();
img.onload = function() {
    var width = img.width;
    console.log('图片宽度：' + width + 'px');
};
img.src = 'path/to/image.jpg';

方法五：使用 fetch API

fetch API 是一种基于 Promise 的网络请求方法。我们可以使用 fetch 来获取图片的 URL，并在获取到图片后获取其宽度。

fetch('path/to/image.jpg')
    .then(function(response) {
        return response.blob();
    })
    .then(function(blob) {
        var img = new Image();
        img.onload = function() {
            var width = img.width;
            console.log('图片宽度：' + width + 'px');
        };
        img.src = URL.createObjectURL(blob);
    });

总结

以上五种方法都可以用来获取图片的宽度。在实际应用中，可以根据具体需求选择合适的方法。例如，如果图片尚未加载到页面上，可以使用 Image 对象或 fetch API；如果图片已经加载到页面上，可以使用 img 元素的 width 属性或 getBoundingClientRect() 方法。

-- 展开阅读全文 --