# :fullscreen设置元素在全屏模式下的CSS样式

> 全屏API可以让Web前端开发人员通过JavaScript轻松控制浏览器全屏模式的进入与退出，如同按下F11键一样的效果。这篇文章不谈JavaScript，看看CSS如何设置在处于全屏模式下元素的样式。

Author: DeathGhost
Published: 2021-04-25 21:08:23
Category: css
Canonical: https://www.deathghost.cn/article/css/93
Keywords: CSS, fullscreen, 全屏, 伪类, 伪选择器, 全屏API, 元素全屏样式, 进入全屏, 退出全屏, 全屏模式

浏览器全屏模式其实在Web应用中很少使用到，只有在预览图片、视频、精美Web效果（特效、游戏）或专注Web某一版块（如常见的[富文本编辑器](https://www.deathghost.cn/article/angular/31)）时会通过F11按键进入全屏欣赏或操作；也就是隐藏浏览器本身的UI组件，将内容最大化填充于显示器之内，以达到最好的可视效果。

![CSS全屏模式样式设置](https://static.deathghost.cn/post/2021/04/25/1619360079768778.jpg)

CSS :fullscreen 元素在全屏模式下的样式设置

## 示例

希望在全屏模式下背景显示为暗红色且不显示最后一个<p>标签。

## 创建Web元素

<section class="main">
    <h1>元素在全屏显示模式下的CSS样式</h1>
    <p>css伪类:fullscreen应用于当前处于全屏显示模式的元素。</p>
    <button id="toggle-pattern">全屏模式</button>
</section>

## 设置元素样式

html,body{
    position: relative;
    display: grid;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
}
.main{
    width: 50vw;
    padding: 2em;
    text-align: center;
    transition: background-color 100ms ease;
}
.main:fullscreen{
    background-color: DarkRed;
    color: white;
}
这个示例主要就在关于:fullscreen伪类，应用于当前处于全屏显示模式下的元素。

## JavaScript控制进入退出全屏模式

const targetElement = document.querySelector('.main');
const togglePatternButton = document.querySelector('#toggle-pattern');
togglePatternButton.addEventListener('click', _ => {
    if (!document.fullscreenElement) {
        targetElement?.requestFullscreen();
        togglePatternButton.textContent = '退出全屏';
    } else {
        document.exitFullscreen();
        togglePatternButton.textContent = '全屏模式';
    }
});

## 显示结果

## Related

- Previous: [CSS text-combine-upright 竖行横书组合](https://www.deathghost.cn/article/css/86)
- Next: [CSS container容器查询](https://www.deathghost.cn/article/css/112)