正文

掌握JS获取图片宽高：简单方法助你轻松实现

/0 浏览量
1110

在网页设计中，有时候我们需要根据图片的宽度和高度来调整布局或者进行其他操作。JavaScript 提供了多种方法来获取图片的宽度和高度。下面，我将详细介绍几种简单且实用的方法，帮助你轻松实现这一功能。

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

这是最简单直接的方法。当图片加载完成后，你可以直接通过 img 元素的 width 和 height 属性来获取图片的宽度和高度。

// 假设有一个 img 元素，其 ID 为 "myImage"
var img = document.getElementById("myImage");

// 获取图片宽度
var width = img.width;

// 获取图片高度
var height = img.height;

console.log("图片宽度：" + width + "px");
console.log("图片高度：" + height + "px");

这种方法适用于图片已经加载到页面上的情况。

方法二：使用 window.onload 事件

如果图片尚未加载到页面上，你可以使用 window.onload 事件来确保图片加载完成后执行获取宽高的代码。

window.onload = function() {
    var img = document.getElementById("myImage");
    var width = img.width;
    var height = img.height;

    console.log("图片宽度：" + width + "px");
    console.log("图片高度：" + height + "px");
};

方法三：使用 Image 对象

除了 img 元素，你还可以使用 Image 对象来获取图片的宽度和高度。

var img = new Image();
img.src = "path/to/your/image.jpg";

img.onload = function() {
    var width = img.width;
    var height = img.height;

    console.log("图片宽度：" + width + "px");
    console.log("图片高度：" + height + "px");
};

这种方法适用于你需要在图片加载之前获取其宽度和高度的情况。

方法四：使用 CSS 样式

有时候，我们可能需要根据图片的宽度和高度来调整布局。在这种情况下，你可以使用 CSS 样式来获取图片的宽度和高度。

var img = document.getElementById("myImage");
var style = window.getComputedStyle(img);

var width = parseInt(style.width, 10);
var height = parseInt(style.height, 10);

console.log("图片宽度：" + width + "px");
console.log("图片高度：" + height + "px");

这种方法可以获取到图片的实际显示宽度和高度，包括由于 CSS 样式导致的缩放。

总结

以上四种方法都是获取图片宽高的有效途径。你可以根据自己的需求选择合适的方法。希望这篇文章能帮助你轻松实现这一功能。

-- 展开阅读全文 --