原生JS实现对页面某个元素的全屏化展示

起因是客户反映界面展示list的时候一次性展示的量太少，其他短时无关的内容占了大部分区域，觉得效率不好。

很无语。。。本来list是提供的有分页和单页大小设置的，你自己屏幕小有什么办法，然后产品就提出了折中方案，给table元素加个全屏化的功能按钮，全屏展示table，本来以为不会太好做，毕竟只听过浏览器整体能全屏化，单个元素也能全屏化吗？

查了一下，还真能。

w3c标准提供的HTML元素实例上有成员方法requestFullscreen，可以实现针对某一元素进行全屏化。

经过一番优化。 有了如下函数，可以实现对任意html元素的全屏展示。

         fullScreen() {
                const element = document.getElementById('tablebox');
                if (!document.fullscreenElement) {
                    this.requestFullScreen(element);
                } else {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    }
                }
            },
            requestFullScreen(element) {
                const requestMethod =
                    element.requestFullscreen || //W3C
                    element.webkitRequestFullScreen || //Chrome
                    element.mozRequestFullScreen || //FireFox
                    element.msRequestFullscreen; //IE11
                if (requestMethod) {
                    requestMethod.call(element);
                }
            },

将元素示例id，或ref，替换 document.getElementById('tablebox')即可。