javascript中让dom元素全屏需调用requestfullscreen()方法，必须由用户手势触发，兼容前缀后监听fullscreenchange事件，通过document.exitfullscreen()退出，并用:fullscreen伪类适配样式。

JavaScript 中让 DOM 元素进入全屏显示，主要依靠浏览器提供的 Fullscreen API，它不是把元素“拉伸填满屏幕”，而是将指定元素（及其子元素）提升为顶层、独占整个视口的全屏状态——类似视频播放器点全屏的效果。

调用 requestFullscreen() 方法

这是实现全屏的核心操作。需注意：该方法必须由用户手势（如 click、touchend）触发，不能在页面加载或定时器中自动调用，否则会被浏览器拒绝。

• 获取目标元素，例如：const box = document.getElementById('myBox');
• 调用全屏方法（需兼容各浏览器前缀）：
  

  if (box.requestFullscreen) {<br>  box.requestFullscreen();<br>} else if (box.webkitRequestFullscreen) {<br>  box.webkitRequestFullscreen();<br>} else if (box.msRequestFullscreen) {<br>  box.msRequestFullscreen();<br>}

• 现代写法可借助 Element.prototype.requestFullscreen 的标准方法（Chrome 71+、Firefox 64+、Edge 79+ 已原生支持，无需前缀）

监听全屏状态变化

全屏进入/退出时会触发事件，可用于更新 UI（如切换按钮文字、调整样式）：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• 监听 fullscreenchange（注意是 document 上触发）：
  

  document.addEventListener('fullscreenchange', () => {<br>  if (document.fullscreenElement) {<br>    console.log('已进入全屏，当前元素：', document.fullscreenElement);<br>  } else {<br>    console.log('已退出全屏');<br>  }<br>});

• 注意事件名无 “on” 前缀，且 document.fullscreenElement 返回当前全屏的 DOM 元素（null 表示未全屏）

退出全屏的几种方式

用户可按 ESC 键退出；代码中也可主动退出：

• 调用 document.exitFullscreen()（同样需兼容前缀：webkitExitFullscreen / msExitFullscreen）
• 该方法无参数，全局生效，不依赖之前哪个元素调用了 requestFullscreen
• 建议封装一个 toggle 函数，根据当前状态决定进入或退出

样式适配与注意事项

进入全屏后，浏览器通常会添加一些默认样式（如居中、黑背景），但你可以用 CSS 精确控制：

• 使用伪类选择器定制全屏时的元素样式：
  #myBox:fullscreen { width: 100vw; height: 100vh; }
  对应前缀：#myBox:-webkit-full-screen、#myBox:-ms-fullscreen
• 全屏状态下，position: fixed 或 absolute 的子元素会相对于整个屏幕定位，需留意坐标基准变化
• 部分浏览器（如 Safari iOS）不支持非 <video></video> 元素调用全屏 API，移动端兼容性需实测

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南