无法使用 JS 获取 HTML 中图像的实际大小
我有一个从外部资源获得的球的图像，我需要获取图像的大小（高度和宽度）以进行进一步的计算，但我尝试的内容显示0（但实际上它是40px）
下面是整个代码：
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<title>Ball to center</title>
<style>
#field {
width: 200px;
border: 10px groove black;
background-color: #00FF00;
position: relative;
}
#ball {
position: absolute;
}
</style>
</head>
<body>
<div id="field">
<img src="https://en.js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>
<script type="text/javascript">
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>
aluckdog2回答
-
慕码人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
相关分类
JavaScript