:fullscreen

有限可用性

此功能不是基线，因为它在一些最常用的浏览器中无法正常工作。

The :fullscreen CSS 伪类 匹配当前处于全屏模式的每个元素。如果多个元素已进入全屏模式，则选择所有这些元素。

语法

css
:fullscreen {
  /* ... */
}

使用说明

:fullscreen 伪类允许您配置样式表，以便在元素在全屏和传统演示之间切换时自动调整内容的大小、样式或布局。

示例

设置全屏元素的样式

此示例根据 <div> 元素是否处于全屏模式，为其应用不同的背景颜色。它包含一个 <button> 用于切换全屏模式的打开和关闭。

html
<div class="element">
  <h1>MDN :fullscreen pseudo-class demo</h1>

  <p>
    This demo uses the <code>:fullscreen</code> pseudo-class to automatically
    change the background color of the <code>.element</code> div.
  </p>

  <p>
    Normally, the background is light yellow. In fullscreen mode, the background
    is light pink.
  </p>

  <button class="toggle">Toggle Fullscreen</button>
</div>

:fullscreen 伪类用于在元素处于全屏模式时覆盖 <div> 的 background-color。

css
.element {
  background-color: lightyellow;
}

.element:fullscreen {
  background-color: lightpink;
}

以下 JavaScript 提供一个事件处理程序函数，该函数在单击 <button> 时切换全屏模式。

js
document.querySelector(".toggle").addEventListener("click", function (event) {
  if (document.fullscreenElement) {
    // If there is a fullscreen element, exit full screen.
    document.exitFullscreen();
    return;
  }
  // Make the .element div fullscreen.
  document.querySelector(".element").requestFullscreen();
});

演示

查看示例.

规范

规范
全屏 API 标准
# :fullscreen-伪类

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅