无法使用 JS 获取 HTML 中图像的实际大小

我有一个从外部资源获得的球的图像，我需要获取图像的大小（高度和宽度）以进行进一步的计算，但我尝试的内容显示0（但实际上它是40px）

下面是整个代码：

<!DOCTYPE html>

<head>

<title>Ball to center</title>

<style>

#field {

width: 200px;

border: 10px groove black;

background-color: #00FF00;

position: relative;

}

#ball {

position: absolute;

}

</style>

</head>

<body>

<img src="https://en.js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

</div>

let field = document.getElementById('field');

let ball = document.getElementById('ball');

console.log(`natural height and width: ${ball.naturalHeight} - ${ball.naturalWidth}`);

console.log(`client height and width: ${ball.clientHeight} - ${ball.clientWidth}`);

</script>

</body>

</html>

aluckdog

浏览 73回答 2

2回答

慕码人2483693

您的方法的问题在于代码是在加载页面之前执行的。如这里所示，您可以使用vanilla javascript执行类似操作，直到页面加载。let field = document.getElementById('field');let ball = document.getElementById('ball');window.onload = () => {  console.log(`natural height and width: ${ball.naturalHeight} - ${ball.naturalWidth}`);  console.log(`client height and width: ${ball.clientHeight} - ${ball.clientWidth}`);  };

素胚勾勒不出你

您只应在图像加载后检查图像的大小。可以使用 image 元素的属性来查看它是否已加载，否则会将处理程序附加到 load 事件。loadedlet ball = document.getElementById('ball');const checkImgSize = el => {    console.log(`natural height and width: ${el.naturalHeight} - ${el.naturalWidth}`);    console.log(`client height and width: ${el.clientHeight} - ${el.clientWidth}`);};if( ball.loaded )    checkImgSize(ball);else     ball.addEventListener('load', function(){ checkImgSize(this) }, { once: true });

随时随地看视频慕课网APP