Javascript:如何获取图像URL的宽度

Question

我试图在高度发生变化后获取图像的宽度，但我只有 URL(图像不在 HTML 的标记中)所以我尝试了以下代码:

var img = document.createElement("img");
img.src = "./images/niceImages.jpg";
img.style.height = "200px";
console.log(img.clientWidth);

但是属性“clientWidth”返回了 0。我知道使用 JQuery 可能会容易得多，但是我想使用纯 Javascript 来完成。

有谁知道这是否可以做到？或者至少如何获取图像 URL 的纵横比或宽度和高度？

Answer 1

如果您将创建的图像附加到 DOM，那么您应该会发现宽度会被计算出来，然后可以正常使用

var img = document.createElement("img");
img.src = "http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png";
img.onload = function(){
    img.style.height = "200px";
    img.style.visibility = 'hidden';
    document.body.appendChild(img);
    console.log(img.clientWidth);
}