跳到主要内容

offsetWidth

2025年02月13日
柏拉文
越努力，越幸运

一、认识​

offsetWidth/offsetHeight 表示视频在页面上显示的实际宽高。

  • video.videoWidth 和 video.videoHeight：返回视频的原始分辨率，不受 CSS 样式的影响。

  • video.offsetWidth 和 video.offsetHeight：返回视频实际显示在页面上的尺寸，受 CSS 样式、父容器等因素影响。

如果视频的宽高没有显式设置，videoWidth 和 videoHeight 会提供视频的原始分辨率。如果这些属性返回 0，可能是视频尚未加载完成，或者 video 元素没有 src 或 source 属性时。

二、语法​

const video = document.querySelector("video");

const displayedWidth = video.offsetWidth;
const displayedHeight = video.offsetHeight;

console.log("视频显示的宽度:", displayedWidth);
console.log("视频显示的高度:", displayedHeight);