Fullscreen API 全屏

Fullscreen API：element.requestFullscreen全屏请求、document.exitFullscreen退出、document.fullscreenElement检测全屏状态、fullscreenchange事件监听、CSS :fullscreen伪类全屏样式 · 难度：入门 · +10XP

Fullscreen API —— 全屏显示元素

不仅视频可以全屏，任何DOM元素都可以！Fullscreen API让你用JavaScript控制元素进入和退出全屏模式。

基本操作

const el = document.getElementById('gameCanvas');
// 进入全屏
await el.requestFullscreen();
// 退出全屏
await document.exitFullscreen();
// 检测是否全屏
document.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement) {
    console.log('进入了全屏');
  } else {
    console.log('退出了全屏');
  }
});

动手练习

1. 基础练习：做一个"全屏阅读"按钮——点击后文章区域全屏显示。
2. 进阶应用：在游戏画布上用Fullscreen API实现全屏游戏。
3. 项目实战：在图片画廊中点击任意图片进入全屏查看模式。