Question

我在一个页面上有多张图片，并且有以下代码：

//main image
<img src="/my_image.png" id="main_img" />

//other images
<img .... onclick="setMainImg(this)" />



<button onclick="getSize()">get size</button>



//js, at the bottom
var mainImg = document.getElementById("main_img");

function getSize() {
  console.log(mainImg.width + "x" + mainImg.height + "\r\n");
}

页面加载后，它会显示类似33x16的内容

点击其他图片后

  //js
  function setMainImg(img) {
    mainImg.src = img.src;
  }

它开始在控制台中打印相应的值：

448x354

和类似的东西。即使单击同一张第一张图片（！），它也会打印出不同的尺寸，尺寸是原来的10倍。

为什么？该如何解决？

Answer 1

图像加载后必须获得尺寸，因此单击时应设置图像变量。

var mainImg;

function getSize() {
  mainImg = document.getElementById("main_img");
  console.log(mainImg.width + "x" + mainImg.height + "\r\n");
}

页面加载时图像大小不正确-太小

1 个答案: