在 html 5 中，通过全屏 API 可让 div 全屏显示。首先检查 浏览器 是否支持 fullscreenEnabled，再调用 requestFullscreen 方法并处理不同前缀（如 webkit、ms）以进入全屏；使用 exitFullscreen 退出；监听 fullscreenchange 事件 获取状态变化，并可通过 css 的：fullscreen伪类 定义样式，注意全屏需用户触发且不能自动弹出。
在 html5 中，让一个 div 元素全屏显示可以通过 全屏 API（Fullscreen API）实现。这个 API 允许开发者将页面中的某个元素（如div）请求进入全屏模式，适用于视频播放、游戏或展示类应用。
1. 检查 浏览器 支持情况
不是所有浏览器都完全支持全屏 API，调用前最好先检查是否支持：
if (document.fullscreenEnabled || document.webkitFullscreenEnabled) {// 支持全屏} else {alert(" 当前浏览器不支持全屏功能 "); }
2. 调用全屏方法
使用 requestFullscreen() 方法可以让指定的 div 进入全屏。注意不同浏览器可能需要加前缀：
function launchFullscreen(element) {if (element.requestFullscreen) {element.requestFullscreen(); } else if (element.webkitRequestFullscreen) {// safari, Chrome element.webkitRequestFullscreen();} else if (element.msRequestFullscreen) {// IE/edge element.msRequestFullscreen();} } // 调用示例 const targetDiv = document.getElementById("myDiv"); launchFullscreen(targetDiv);
3. 退出全屏
可以使用 exitFullscreen 退出全屏状态：
立即学习 “ 前端免费学习笔记（深入）”；
function exitFullscreen() { if (document.exitFullscreen) {document.exitFullscreen(); } else if (document.webkitExitFullscreen) {document.webkitExitFullscreen(); } else if (document.msExitFullscreen) {document.msExitFullscreen(); } }
4. 监听全屏状态变化
你可以监听 fullscreenchange 事件来判断是否进入或退出全屏：
document.addEventListener("fullscreenchange", () => {if (document.fullscreenElement) {console.log(" 已进入全屏 "); } else {console.log(" 已退出全屏 "); } }); </font> <p> 对应地，带前缀的事件名如 <code>webkitfullscreenchange</code> 也可根据需要添加。</p> <H3>5. css 样式 注意事项 </H3> <p> 进入全屏后，元素会脱离原有布局，占据整个屏幕。你可以在 CSS 中为全屏状态定义样式：</p> <font face="Courier New"> <pre class="brush:php;toolbar:false;"> #myDiv:fullscreen {width: 100%; height: 100%; background: black;}
也可以使用伪类 :-webkit-full-screen 兼容 WebKit 内核浏览器。
基本上就这些。全屏 API 使用简单，但需注意浏览器兼容性和用户交互限制——通常只能在用户操作（如点击）后触发全屏，不能自动弹出，否则会被阻止。
