我试图通过使用以下代码获取我的图像宽度和高度,但我收到的所有内容都是未定义的.
任何人都可以向我解释这项工作如何？
<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负荷.
如果您使用脚本添加图像,并且在设置之前挂钩load事件,那么这是最简单的:src
<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中的图像来执行此操作,但是,您必须考虑在挂接事件之前图像可能已经加载的可能性:
<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>