全屏切换时应监听 fullscreenchange 事件，通过 document.fullscreenelement 判断状态，优先用 class 或 css 变量更新样式，兼容旧版可加前缀事件，封装时需支持清理绑定。
在全屏切换事件中更新 DOM 布局样式，核心是监听 fullscreenchange 事件，并在回调中根据当前全屏状态（document.fullscreenElement 是否为 null）动态修改元素的 class、内联样式或 CSS 变量。
监听全屏切换事件
全屏状态变化会触发 document 上的 fullscreenchange 事件（注意不是 onfullscreenchange 属性，而是用 addEventListener）：
- 该事件在进入/退出全屏时均触发，需主动判断当前状态
- 兼容性上，部分旧浏览器需监听带前缀的事件（如
webkitfullscreenchange、mozfullscreenchange），但现代 Chrome/Firefox/Safari/Edge 均支持标准事件 - 推荐统一监听标准事件 + 少量前缀回退（仅针对仍需支持较老版本的场景）
判断是否处于全屏状态
使用 document.fullscreenElement 判断（返回当前全屏的元素，null 表示未全屏）：
- 不要依赖
document.webkitIsFullScreen等已废弃属性 - 注意：该属性值为
null或一个 Element 节点，可直接用!!document.fullscreenElement转为布尔值 - 若你的全屏目标是某个容器（如
#player），也可额外检查document.fullscreenElement === playerEl
更新 DOM 样式的方式（推荐组合使用）
避免直接大量操作内联样式，优先用 CSS class 控制布局变化：
-
添加/移除 class：例如给 body 加
is-fullscreen类，再用 CSS 控制子元素尺寸、定位、隐藏等 -
设置 CSS 自定义属性：如
document.documentElement.style.setProperty('--is-fullscreen', '1')，配合body:has(:fullscreen)或 class 更灵活 -
局部重设关键样式：如视频容器需拉伸至全屏区域，可在 JS 中设置
videoEl.style.width = '100vw'; videoEl.style.height = '100vh';，但建议只用于必须动态计算的场景（如适配不同设备纵横比）
完整示例（含防抖与清理）
实际使用中建议封装并注意避免重复绑定：
function setupFullscreenHandler(targetEl) {
const updateLayout = () => {
const isFullscreen = !!document.fullscreenElement;
document.body.classList.toggle('fullscreen-active', isFullscreen);
// 可选：通知自定义组件或触发 resize 逻辑
window.dispatchEvent(new Event('resize')); // 触发响应式重排（如有依赖）
};
// 绑定事件（含前缀兼容）
const events = ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'msfullscreenchange'];
events.forEach(type => document.addEventListener(type, updateLayout));
// 清理函数（可选，用于单页应用卸载时调用）
return () => {
events.forEach(type => document.removeEventListener(type, updateLayout));
};
}
// 使用
const cleanup = setupFullscreenHandler(videoEl);
// 后续可调用 cleanup() 解绑
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
