全屏显示一个 div - Javascript

在开发 web 应用时，有时需要全屏显示一个 div，这就需要使用 Javascript 来控制元素的 CSS 样式。

实现方式

以下是实现全屏显示一个 div 的方法：

方式一：使用 CSS

#fullscreen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

let el = document.getElementById('fullscreen');
el.style.display = 'flex';

使用 CSS 设置 position: fixed、top: 0、right: 0、bottom: 0、left: 0 可以让一个 div 全屏显示。z-index 和 display 可以控制 div 的层叠和内容布局。通过 Javascript 来控制元素的 CSS 样式，实现动态全屏显示和隐藏。

let el = document.getElementById('fullscreen');
el.style.display = 'none'; // 隐藏

方式二：使用全屏 API

let el = document.getElementById('fullscreen');
if (el.requestFullscreen) {
  el.requestFullscreen();
} else if (el.webkitRequestFullscreen) { /* Safari */
  el.webkitRequestFullscreen();
} else if (el.msRequestFullscreen) { /* IE11 */
  el.msRequestFullscreen();
}

if (document.exitFullscreen) {
  document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
  document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
  document.msExitFullscreen();
}

使用浏览器的全屏 API，可以实现全屏显示和退出全屏。在这里，我们需要获取到需要全屏显示的元素，然后对其应用 requestFullscreen 方法即可。退出全屏需要对 document 应用 exitFullscreen 方法。

注意事项

• 在使用全屏 API 时，必须在用户操作（如点击按钮）之后才能调用 requestFullscreen 方法，否则会报错。
• 对于不同的浏览器，API 名称可能不同，需要做浏览器兼容性处理。
• 全屏显示的 div 样式应该考虑影响用户体验，可以设置 z-index、display 等来控制层叠和内容布局。

参考链接

• 全屏 API - MDN