在前端开发中，全屏显示元素是一个经常用到的功能，使用原生JS实现比较棘手，因此我们可以使用一些优秀的npm包来简化这个过程。本次教程将介绍如何使用npm包fullscreen实现全屏显示效果。
1. 安装 fullscreen
在终端输入以下命令即可安装 fullscreen：
npm install fullscreen --save
2. 引入 fullscreen
在需要使用 fullscreen 的页面中，需要引入 fullscreen，可以使用以下代码：
import fullscreen from 'fullscreen';
fullscreen 默认返回一个函数，这个函数可以用于开启全屏，关闭全屏以及判断是否当前正在全屏的状态。
3. fullscreen API
fullscreen 提供了以下几个 API 供开发者调用：
3.1 enter()
enter() 方法可以使元素全屏显示，使用方式如下：
let elem = document.getElementById('myElement');
let fs = fullscreen(elem);
fs.enter();3.2 exit()
exit() 方法可以使元素退出全屏显示状态，使用方式如下：
fs.exit();
3.3 toggle()
toggle() 方法可以在传入的元素已进入全屏状态时退出全屏，未进入全屏状态时进入全屏，使用方式如下：
fs.toggle();
3.4 request()
request() 方法可以请求开启全屏，使用方式如下：
fs.request();
3.5 release()
release() 方法可以释放全屏状态，使用方式如下：
fs.release();
3.6 Element 属性
fs.element 属性可以获取当前已经进入全屏状态的元素：
let elem = fs.element; console.log(elem);
4. 示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----- --------------- ---------------------------- -------------------
----- ---------------------------- ------------------
----------------- ------------
-------
------
---- ---------------
------------------
--------------------
------- --------------------------------
------
------- --------------------------------------------------------------------------
--------
----- ---- - -------------------------------------
----- -- - -----------------
----- ------------- - -----------------------------------------
--------------------------------------- -- -- -
------------
---
---------
-------
-------5. 结语
fullscreen 是一个非常好用的 npm 包，方便了页面全屏显示元素的实现。本教程介绍了 fullscreen 的基本用法和常用 API，对于想使用 fullscreen 实现全屏显示效果的开发者来说，应该可以轻松上手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/fullscreen