用原生js实现退出全屏

最新推荐文章于 2024-06-24 12:45:00 发布

uu盘

最新推荐文章于 2024-06-24 12:45:00 发布

阅读量250

点赞数 1

分类专栏： js 文章标签： javascript 前端 css

本文链接：https://blog.youkuaiyun.com/m0_51328823/article/details/122461366

版权

js 专栏收录该内容

6 篇文章

订阅专栏

用原生js实现退出全屏

全屏/退出全屏
      let ele = document.querySelector('#app')
      if(this.type == 0) {
          if (ele.requestFullscreen) {
              ele.requestFullscreen();
          } else if (ele.mozRequestFullScreen) {
              ele.mozRequestFullScreen();
          } else if (ele.webkitRequestFullscreen) {
              ele.webkitRequestFullscreen();
          } else if (ele.msRequestFullscreen) {
              ele.msRequestFullscreen();
          }
          this.type = 1
          this.text = '退出全屏'
      } else {
        if(document.exitFullScreen) {
              document.exitFullScreen();
          } else if(document.mozCancelFullScreen) {
              document.mozCancelFullScreen();
          } else if(document.webkitExitFullscreen) {
              document.webkitExitFullscreen();
          } else if(document.msExitFullscreen) {
              document.msExitFullscreen();
          }
          this.type = 0
          this.text = '全屏'
      }

修改全屏样式

:full-screen{}用在CSS代码中，可以控制全屏元素（及其子元素）全屏状态时的样式。同样，不同浏览器不同前缀。如:-moz-full-screen{}或:- webkit-full-screen{}.
一个页面如果有多个全屏元素，在CSS控制的时候，可以使用类似#element:full-screen{}的选择器分别控制