我有一个从外部资源获得的球的图像，我需要获取图像的大小（高度和宽度）以进行进一步的计算，但我尝试的内容显示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>
2 回答
慕码人2483693
TA贡献1860条经验 获得超9个赞
您的方法的问题在于代码是在加载页面之前执行的。如这里所示，您可以使用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}`);
};
素胚勾勒不出你
TA贡献1827条经验 获得超9个赞
您只应在图像加载后检查图像的大小。可以使用 image 元素的属性来查看它是否已加载，否则会将处理程序附加到 load 事件。loaded
let 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 });
添加回答
举报
0/150
提交
取消