<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;
transition: background-color 100ms ease;
background-color: orange;
}
.main:fullscreen{
background-color: DarkRed;
color: white;
}
</style>
</head>
<body>
<section class="main">
<h1>元素在全屏显示模式下的CSS样式</h1>
<p>css伪类:fullscreen应用于当前处于全屏显示模式的元素。</p>
<button id="toggle-pattern">全屏模式</button>
</section>
</body>
<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>
