我尝试使用以下代码获取图像宽度和高度，但我收到的所有内容都是未定义的。
谁能向我解释一下这是如何工作的？
<script>
var img = new Image();
img = document.getElementById("top");
alert(this.width + 'x' + this.height);
</script>
<body>
<div id="ad">
<div id="banner">
<img class="top" id="top" src="frame_2.jpg"/>
</div>
</div>
</body>
最佳答案
首先，如果您要从文档中获取图像，则无需调用new Image。
您确实需要等待img元素存在并加载img。
如果您使用脚本添加图像，并在设置src之前 Hook load事件，这是最简单的:
<body>
<div id="ad">
<div id="banner"></div>
</div>
<script>
var img = document.createElement('img')
img.className = "top";
img.id = "top";
img.onload = function() {
alert(this.width + 'x' + this.height);
};
img.src="frame_2.jpg";
document.getElementById("banner").appendChild(img);
</script>
</body>
您可以使用 HTML 中的图像来完成此操作，但您只需考虑到在 Hook 事件之前图像可能已经加载的可能性:
<body>
<div id="ad">
<div id="banner">
<img class="top" id="top" src="frame_2.jpg"/>
</div>
</div>
<script>
var img = document.getElementById("top");
img.onload = loaded;
if (img.complete) {
loaded();
}
function loaded() {
if (img) {
alert(img.width + 'x' + img.height);
img.onload = null;
img = null; // Just as a marker in case of repeated calls
}
};
</script>
</body>
关于javascript - 如何使用 JavaScript 获取图像的宽度和高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33548885/