全屏展示效果实现

项目学习过程中，提到将整个展示面扩到浏览器，嗯，也就是全屏展示

大概效果就是：

全屏展示之后

代码示例：

此外，document.documentElement返回文档的documentElement

使用Web API的全屏API接口

官方解释为：

全屏 API - Web API 接口参考 | MDN

全屏 API 为使用用户的整个屏幕展现网络内容提供了一种简单的方式，并且在不需要时退出全屏模式。这种 API 让你可以简单地控制浏览器，使得一个元素与其子元素，如果存在的话，可以占据整个屏幕，并在此期间，从屏幕上隐藏所有的浏览器用户界面以及其他应用。

属性：

1、document.fullScreenElement

为null 则不处于全屏状态

2、document.fullScreenEnabled

为false则不处于全屏状态

事件：

Document.exitFullscreen()

Element.requestFullscreen()
事件处理程序：
1、document上的事件处理程序

Document.onfullscreenchange

fullscreenchange 事件的处理程序，当进入全屏或退出全屏时，事件将被发送到Document上。此处理程序仅在整个文档全屏模式更改时有效。

Document.onfullscreenerror

fullscreenerror 事件的处理程序，当进入全屏或退出全屏出错时，事件将被发送到 Document 上，仅对整个文档的全屏模式更改出错时候有效。

2、element上的事件处理程序

Element.onfullscreenchange

当全屏事件发生时，该事件会被发送到该元素，表明该元素进入或退出全屏模式

Element.onfullscreenerror

fullscreenerror 事件的处理程序，当指定的 Element 改变全屏模式时候出现错误，该事件将被发送到指定的 Element 上。