使用 Javascript 获取图像尺寸并将其应用于任何其他元素？

Question

我已经尝试过了，但它不起作用，我怎么能让它工作，#sky2 获得与#sky 相同的高度和宽度？我可能会将#sky2 更改为 div 或其他内容。

function ImgWH() {

  var mImg = document.querySelector("#sky");

  var mWidth = mImg.clientWidth;

  var mHeight = mImg.clientHeight;

  document.getElementById("sky2").style.width = mWidth;

}

#sky {

  height: 50vh;

  width: 100%;

}

<img src="https://picsum.photos/300/150" id="sky">

<img src="https://picsum.photos/300/150" id="sky2">

Answer 1

好吧，首先你必须调用你的函数，但是当它运行时，你必须记得在你设置的值上添加一个度量单位，否则不知道元素的宽度。function ImgWH() {&nbsp; var mImg = document.getElementById("sky");&nbsp; var mWidth = mImg.clientWidth;&nbsp; var mHeight = mImg.clientHeight;&nbsp; document.getElementById("sky2").style.width = mWidth + "px"; // <-- must add unit}ImgWH();&nbsp; // <-- Remember to invoke your function#sky {&nbsp; height: 50vh;&nbsp; width: 100%;}<img src="https://picsum.photos/300/150" id="sky"><img src="https://picsum.photos/300/150" id="sky2">

Answer 2

从第一张图片获取宽度并将其设置为第二张图片的宽度（注意“px”是必需的）并且不要忘记启动该功能。function ImgWH() {&nbsp; &nbsp; var myImg = document.getElementById("sky");&nbsp; &nbsp; var myImg2 = document.getElementById("sky2");&nbsp; &nbsp; var mWidth = myImg.width;&nbsp; &nbsp; var mHeight = myImg.clientHeight;&nbsp; &nbsp; myImg2.style.width = mWidth +'px';}ImgWH();#sky {&nbsp; height: 50vh;&nbsp; width: 100%;}<img src="https://picsum.photos/300/150" id="sky"><img src="https://picsum.photos/300/150" id="sky2">