让我们看一下JavaScript中的全屏API。它使您可以做一个非常有力的事情：完整筛选您想要的一个特定元素。不仅如此，CSS也可以为特殊选择器提供帮助。
每个主要浏览器都具有最大化浏览器窗口本身的形式内置的全屏功能。您按F11或⌃⌘F（PC上的Winkey⬆），浏览器将填充您的显示器，直到删除UI组件（例如窗口管理按钮）。
当您进入全屏模式时，它最大化了显示网页的空间，但这并不总是您想要的。通常，您要么想完整版页面的某些特定元素，例如视频或游戏。这是全屏API派上用场的地方。
全屏API有助于实现浏览器全屏模式无法做到的东西，例如：
首先，确定需要在全屏模式下显示哪些元素。之后，唯一的事情是检查该元素是否具有requestfullscreen（）方法，然后在元素上调用。
让我们从一个简单的
<div> </div>
首先，我们选择它并检查它是否具有该方法。如果是这样，那么我们在其上调用requestfullscreen方法。很简单：
LET FULLSCREEN = document.queryselector（“＃fullscreen”）;
如果（fullscreen.requestfullscreen）{
fullscreen.requestfullscreen（）;
}但是，我们希望有条件地运行此代码，而不是有人降落在页面上。我们将制作一个可以切换全屏模式的按钮。
<div> <button>切换全屏</button> </div>
LET FULLSCREEN = document.queryselector（“＃fullscreen”）;
令button = document.queryselector（“＃button”）;
button.AddeventListener（“ click”，（）=> {
if（！document.fullscreenelemt）
全屏？。
} 别的 {
document.exitfullscreen（）;
}
}）;请注意我们如何使用document.fullscreenlement。如果以前有一个元素，那么它将返回它。如果没有，它将返回null。
这也是一个好主意，最好在用户的浏览器中启用了全屏模式。为此，我们可以使用document.fullscreenenabled。它返回布尔值，说我们是否可以在此特定浏览器中使用全屏API。用户可能会禁用全屏，或者浏览器可能不支持它。
我们要介绍的最后一个方法是document.exitfullscreen（）。用户应始终通过按键盘上的ESC来退出全屏模式。我们可以使用Exitfullscreen采用某种自定义方法来退出全屏模式。全屏的元素都没关系；调用此方法后，它将返回窗口模式。
正如您在我们的按钮元素的代码中看到的那样，我们首先检查是否已经激活了全屏。然后，基于这些信息，我们要么转到全屏模式，要么返回窗口模式。
关于全屏API的很酷的事情是，我们可以匹配CSS中的全屏元素。这正是：全屏伪选择器旨在做的！
#fullscreen：FullScreen {
背景色：黄色；
}如您所见，#fullscreen div是唯一在元素处于全屏模式（仅在全屏模式下）时获得黄色背景颜色的元素。捕获是我们实际上不能选择这样的任何元素。我们只能在全屏模式下选择“根”元素。儿童元素都不会匹配。
换句话说，#Button：全屏之类的内容不会选择全屏元素中包含的按钮 - 也就是说，除非我们希望按钮是全屏而不是DIV。
一些浏览器需要前缀才能工作。 Firefox使用-moz-full-Screen和基于Webkit的浏览器使用-Webkit-Full-Screen。
#fullscreen：-webkit-full-screen {
背景色：黄色；
}
#fullscreen：-moz-full-screen {
背景色：黄色；
}您是否知道，当我们处于全屏模式时，有一个伪元素在您的全屏元素下方呈现？默认情况下，假元素是黑色的。如果您想更改该伪元素的样式，则可以这样做：
#fullscreen ::背景{
背景色：Skyblue；
}这是最后的例子。请记住，全屏模式可能与嵌入式笔无法使用，因此您需要在本文之外查看它。
以上是如何利用全屏API…并进行样式的详细内容。更多信息请关注PHP中文网其他相关文章！
