<div class="wrapper">
  <p>もしフルスクリーン状態ならこの文字列は赤色になる</p>
  <button id="requestFull">フルスクリーン表示</button>
  <button id="exitFull">フルスクリーン解除</button>
</div>
.wrapper {
  min-height: 100vh;
  padding: 2rem;
  background-color: #fff;
  box-sizing: border-box;
}
button {
  margin-top: 1rem;
}
:fullscreen p {
  color: red;
}
View Compiled
const req = document.getElementById("requestFull");
const exit = document.getElementById("exitFull");

req.addEventListener("click", () => {
  if (document.fullscreenEnabled) {
    // 全画面モードにする
    document.documentElement.requestFullscreen();
  }
});
exit.addEventListener("click", () => {
  // 全画面モードを解除
  if (document.exitFullscreen) {
    document.exitFullscreen();
  }
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.