JavaScript 实现页面元素全屏需调用 Element.requestFullscreen()（兼容写法含前缀），必须由用户手势触发，仅支持可渲染非内联元素；通过 document.fullscreenElement 判断状态，监听 fullscreenchange 和 fullscreenerror 事件；退出用 document.exitFullscreen()；CSS 可用 :fullscreen 伪类适配样式。
使用 JavaScript 实现页面元素全屏展示，核心是调用浏览器提供的 Element.requestFullscreen() 方法，它能让指定 DOM 元素进入全屏模式。注意不是所有元素都默认支持全屏（比如 <iframe> 需要 allowfullscreen 属性），且需用户主动触发（如点击事件），不能自动调用。
确保元素支持全屏并正确调用
只有可渲染的、非内联的元素（如 div、video、canvas）才能进入全屏。调用前建议检查元素是否存在，并捕获可能的错误（例如被浏览器策略阻止）：
- 用
element.requestFullscreen()发起请求（现代标准写法） - 兼容旧版可加前缀：
element.webkitRequestFullscreen()、element.mozRequestFullScreen()、element.msRequestFullscreen() - 必须在用户手势（如
click、touchend）中调用，否则会被静默忽略
监听全屏状态变化并响应
全屏进入或退出时，会触发全局事件 fullscreenchange；出错时触发 fullscreenerror。推荐监听 document：
- 通过
document.fullscreenElement判断当前哪个元素处于全屏（返回null表示未全屏） - 可在回调中更新 UI，比如切换“退出全屏”按钮文案
-
fullscreenerror通常因权限问题或非法调用触发，适合打日志或提示用户重试
退出全屏的两种方式
退出全屏既可通过用户按 ESC 键，也可由脚本控制：
立即学习“Java免费学习笔记（深入）”；
- 调用
document.exitFullscreen()（现代标准） - 兼容写法：
document.webkitExitFullscreen()、document.mozCancelFullScreen()、document.msExitFullscreen() - 调用前建议判断
document.fullscreenElement !== null，避免无意义调用
样式适配与注意事项
全屏状态下，浏览器会为全屏元素添加伪类 :fullscreen，可用于定制样式（如隐藏滚动条、调整背景色）：
- CSS 中写
div:fullscreen { width: 100vw; height: 100vh; }可撑满视口 - 注意移动端 Safari 对
requestFullscreen()支持有限，<video>全屏更可靠 - 全屏后
document.body的滚动会被禁用，若需滚动内容，应在全屏元素内部处理
