如何利用全屏 API……以及对其进行样式设置

让我们看看 JavaScript 中的全屏 API。它允许您执行一项非常强大的操作：准确地将您想要的特定元素全屏显示。不仅如此，CSS 还可以通过一个特殊的选择器提供帮助。

每个主要浏览器都内置了全屏功能，形式为最大化浏览器窗口本身。您可以按 F11 或 ⌃⌘F（PC 上为 WinKey ⬆），浏览器将填充您的显示器，甚至会移除 UI 组件（如窗口管理按钮）。

进入全屏模式时，它会最大化网页的显示空间，但这并不总是您想要的。更常见的情况是，您要么希望页面上的某个特定元素（例如视频或游戏）全屏显示。这就是全屏 API 发挥作用的地方。

全屏 API 有助于实现浏览器全屏模式无法实现的功能，例如

• 将页面上的特定元素而不是整个页面全屏显示。
• 使用 :fullscreen 伪类匹配 CSS 中的元素，该伪类检查特定元素的全屏标志是否已设置。
• 完全控制何时进入全屏。

让我们开始吧

首先，确定需要以全屏模式显示的元素。之后，唯一需要做的事情就是检查该元素是否具有 requestFullscreen() 方法，然后在该元素上调用它。

让我们从一个简单的 <div> 元素开始，将其设置为全屏

<div id="fullscreen"></div>

首先，我们将选择它并检查它是否具有该方法。如果具有，那么我们将在其上调用 requestFullscreen 方法。就这么简单

let fullscreen = document.querySelector("#fullscreen");

if (fullscreen.requestFullscreen) {
  fullscreen.requestFullscreen();
}

但是，我们希望有条件地运行此代码，而不是在有人访问页面时立即运行。我们将制作一个切换全屏模式的按钮。

<div id="fullscreen">
  <button id="button">Toggle Fullscreen</button>
</div>

let fullscreen = document.querySelector("#fullscreen");
let button = document.querySelector("#button");

button.addEventListener("click", () => {
  if (!document.fullscreenElement) {
    fullscreen?.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
});

请注意我们是如何使用 document.fullscreenElement 的。如果之前有元素已全屏显示，则它将返回该元素；否则，它将返回 null。

最好还要检查用户浏览器中是否启用了全屏模式。为此，我们可以使用 document.fullscreenEnabled。它返回一个布尔值，表示在此特定浏览器中是否可以使用全屏 API。用户可能会禁用全屏模式，或者浏览器可能不支持它。

我们将介绍的最后一个方法是 document.exitFullscreen()。用户应该始终能够通过按键盘上的 ESC 退出全屏模式。我们可以使用 exitFullscreen 以某种自定义方式退出全屏模式。无论哪个元素处于全屏状态，调用此方法后，它都将返回到窗口模式。

如您在按钮元素的代码中看到的，我们首先检查是否已激活全屏模式。然后，根据这些信息，我们将进入全屏模式或返回到窗口模式。

全屏样式

全屏 API 的妙处在于，我们可以在 CSS 中匹配全屏元素。这正是 :fullscreen 伪选择器设计的目的！

#fullscreen:fullscreen {
  background-color: yellow;
}

如您所见，当元素处于全屏模式时，并且仅在全屏模式下，#fullscreen div 是唯一获得黄色背景颜色的元素。需要注意的是，我们实际上无法像这样选择任何元素；我们只能选择处于全屏模式的根元素。任何子元素都不会匹配。

换句话说，诸如 #button:fullscreen 之类的代码将不会选择包含在全屏元素中的按钮，除非我们希望按钮而不是 div 成为全屏元素。

某些浏览器 需要前缀才能使其工作。Firefox 使用 -moz-full-screen，而基于 WebKit 的浏览器使用 -webkit-full-screen。

#fullscreen:-webkit-full-screen {
  background-color: yellow;
}

#fullscreen:-moz-full-screen {
  background-color: yellow;
}

您是否知道，当我们处于全屏模式时，会在全屏元素正下方渲染一个伪元素？默认情况下，该伪元素为黑色。如果您想更改该伪元素的样式，可以这样做

#fullscreen::backdrop {
  background-color: skyblue;
}

这是最终示例。请记住，全屏模式可能无法与嵌入式 Pens 一起使用，因此您需要在本文之外查看它。