TOC

1，前言

发现了一个很好用的全屏API，是HTML5自带的方法，记录一下

2，兼容性

3，API介绍

Document.exitFullscreen()

，用于让当前文档退出全屏模式

Element.requestFullscreen()

，用于发出异步请求使元素进入全屏模式

不仅如此，浏览器的伪类

:fullscreen

，应用于当前处于全屏显示模式的元素，它不仅仅选择顶级元素，还包括所有已显示的栈内元素。

语法

#fullscreen:fullscreen {background-color: pink;}

4，具体方法

changeFullScreen() {const element = document.documentElement// 如果是全屏状态if (this.fullscreen) {// 如果浏览器有这个Functionif (document.exitFullscreen) {document.exitFullscreen()} else if (document.webkitCancelFullScreen) {document.webkitCancelFullScreen()} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen()} else if (document.msExitFullscreen) {document.msExitFullscreen()}} else {// 如果浏览器有这个Functionif (element.requestFullscreen) {element.requestFullscreen()} else if (element.webkitRequestFullScreen) {element.webkitRequestFullScreen()} else if (element.mozRequestFullScreen) {element.mozRequestFullScreen()} else if (element.msRequestFullscreen) {element.msRequestFullscreen()}}// 判断全屏状态的变量this.fullscreen = !this.fullscreen}