html元素全屏

html實現(xiàn)元素全屏的時候，會在該元素上加上如下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;
}

我們可以通過對元素通過調(diào)用requestFullscreen來開啟全屏

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

通過調(diào)用document.exitFullscreen來退出全屏

  document.exitFullscreen
          ? document.exitFullscreen()
          : document.webkitExitFullscreen
          ? document.webkitExitFullscreen()
          : document.mozCancelFullScreen
          ? document.mozCancelFullScreen()
          : document.msExitFullscreen && document.msExitFullscreen()
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容