Javascript 为什么video.width是0，但实际上是539？_Javascript_Html

Javascript 为什么video.width是0，但实际上是539？

javascript html

Javascript 为什么video.width是0，但实际上是539？,javascript,html,Javascript,Html,这是一张图片宽度和高度不是0，但当我在控制台中打印它时，它返回0 下面是我如何打印它的代码： const video = document.getElementById("remoteVideo"); video.addEventListener('play', () => { setInterval(async () => { console.log(video.width); console.log(video.height);

这是一张图片

宽度和高度不是0，但当我在控制台中打印它时，它返回0

下面是我如何打印它的代码：

const video = document.getElementById("remoteVideo");
video.addEventListener('play', () => {
      setInterval(async () => {
      console.log(video.width);
      console.log(video.height);
      }, 100)
    });

以下是完整的html：

<!DOCTYPE html>
<html lang="en"></html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
      html { height: 100%; }
      body { height: 100%; margin: 0; background: #111; text-align: center; }
      #remoteVideo { height: 70%; margin-top: 5%; background: #000; }
      #localVideo { width: 20%; position: absolute; right: 1.1em; bottom: 1em; border: 1px solid #333; background: #000; }
      #callButton { position: absolute; display: none; left: 50%; font-size: 2em; bottom: 5%; border-radius: 1em; }
  </style>
  <script defer src="static/face-api.min.js"></script>

</head>
<body>

    <video id="localVideo" autoplay muted></video>
    <video id="remoteVideo" autoplay></video>
    <button id="callButton" onclick="createOffer()">✆</button>

    <script src="/socket.io/socket.io.js"></script>
    <script defer src="static/script.js"></script>
</body>
</html>


文件
html{高度：100%；}
正文{高度：100%；边距：0；背景：#111；文本对齐：中心；}
#remoteVideo{高度：70%；页边顶部：5%；背景：#000；}
#本地视频{宽度：20%；位置：绝对；右侧：1.1米；底部：1米；边框：1px实心#333；背景：#000；}
#调用按钮{位置：绝对；显示：无；左侧：50%；字体大小：2em；底部：5%；边框半径：1em；}
✆

我做错了什么？

您可以使用

没有异步

下面是你如何将你的问题发布到一个网站上的

const video=document.getElementById（“remoteVideo”）；
video.addEventListener（'play'，（）=>{
log（video.getBoundingClientRect（））；
});
html{
身高：100%；
}
身体{
身高：100%；
保证金：0；
背景：黄色；
文本对齐：居中；
}
#远程视频{
身高：70%；
利润率最高：5%；
背景：红色；
}
#本地视频{
宽度：20%；
位置：绝对位置；
右：1.1米；
底部：1米；
边框：1px实心#333；
背景：粉红色；
}
#呼叫按钮{
位置：绝对位置；
显示：无；
左：50%；
字号：2em；
底部：5%；
边界半径：1米；
}
视频
视频
按钮✆您也可以向我们展示您的HTML吗？在这里使用getBoundingClientRect查看getBoundingClientRect（）的可能副本，谢谢