html元素全屏

html实现元素全屏的时候，会在该元素上加上如下css，该css无法被覆盖和修改。

:not(:root):fullscreen {
    object-fit: contain;
    position: fixed !important;
    top: 0px !important;
    right: 0px !important;
    bottom: 0px !important;
    left: 0px !important;
    box-sizing: border-box !important;
    min-width: 0px !important;
    max-width: none !important;
    min-height: 0px !important;
    max-height: none !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    margin: 0px !important;
}

我们可以通过对元素通过调用requestFullscreen来开启全屏

dom.requestFullscreen
          ? dom.requestFullscreen()
          : dom.webkitRequestFullscreen
          ? dom.webkitRequestFullscreen()
          : dom.mozRequestFullScreen
          ? dom.mozRequestFullScreen()
          : dom.msRequestFullscreen && dom.msRequestFullscreen()

通过调用document.exitFullscreen来退出全屏

  document.exitFullscreen
          ? document.exitFullscreen()
          : document.webkitExitFullscreen
          ? document.webkitExitFullscreen()
          : document.mozCancelFullScreen
          ? document.mozCancelFullScreen()
          : document.msExitFullscreen && document.msExitFullscreen()