<style>
  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;
    background-color: aquamarine;
    transition: background-color 100ms ease;
}
.main:fullscreen{
    background-color: DarkRed;
    color: white;
}
.box2{
  width: 50vw;
  height: 500px;
  background-color: pink;
  position: fixed;
  top:0;
  left:0;
  z-index: 1;
}
</style>

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

<div class="box2">
  box2
</div>

<script>
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 = '全屏模式';
    }
});
</script>