if (document.fullscreenEnabled || document.webkitFullscreenEnabled) {
  // 支持全屏
} else {
  alert("当前浏览器不支持全屏功能");
}

function launchFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) { // Safari, Chrome
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) { // IE/Edge
    element.msRequestFullscreen();
  }
}

// 调用示例
const targetDiv = document.getElementById("myDiv");
launchFullscreen(targetDiv);

function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

document.addEventListener("fullscreenchange", () => {
  if (document.fullscreenElement) {
    console.log("已进入全屏");
  } else {
    console.log("已退出全屏");
  }
});
</font>

<p>对应地，带前缀的事件名如<code>webkitfullscreenchange</code>也可根据需要添加。</p>

<H3>5. CSS样式注意事项</H3>
<p>进入全屏后，元素会脱离原有布局，占据整个屏幕。你可以在CSS中为全屏状态定义样式：</p>
<font face="Courier New">
<pre class="brush:php;toolbar:false;">
#myDiv:fullscreen {
  width: 100%;
  height: 100%;
  background: black;
}