js实现全屏和退出全屏

在JavaScript中，可以使用document对象的fullscreenEnabled、fullscreenElement和exitFullscreen方法来检查是否支持全屏模式，进入全屏模式和退出全屏模式。

以下是实现全屏和退出全屏的示例代码：

// 进入全屏
function enterFullScreen() {
  if (document.fullscreenEnabled) {
    let element = document.documentElement; // 要全屏的元素，这里使用了根元素
    if (!document.fullscreenElement) {
      element.requestFullscreen().catch(err => {
        console.error(err);
      });
    }
  } else {
    console.log('全屏不可用');
  }
}
 
// 退出全屏
function exitFullScreen() {
  if (document.fullscreenEnabled) {
    if (document.fullscreenElement) {
      document.exitFullscreen().catch(err => {
        console.error(err);
      });
    }
  } else {
    console.log('全屏不可用');
  }
}
 
// 监听全屏变化事件
document.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement) {
    console.log('已进入全屏模式');
  } else {
    console.log('已退出全屏模式');
  }
});

在实际应用中，你可以通过用户的某个动作（比如点击按钮）来触发enterFullScreen或exitFullScreen函数。注意，请求全屏的元素必须由用户的动作触发，否则可能会被浏览器阻止。