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

这篇文章发布于 2021-04-25 21:08:23

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

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

CSS全屏模式样式设置 — 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 = '全屏模式';
    }
});