元素设置全屏

werch

已于 2022-10-31 17:14:36 修改

阅读量270

点赞数

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

于 2022-10-25 17:15:28 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42666092/article/details/127517392

版权

js 专栏收录该内容

54 篇文章

订阅专栏

博客围绕元素全屏操作展开，介绍了元素设置全屏和退出全屏的相关内容，并且着重提及了在Vue项目中的应用，属于前端开发领域的信息技术知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

元素设置全屏

Element.requestFullscreen() 
方法用于发出异步请求使元素进入全屏模式。

元素退出全屏

Document.exitFullscreen() 方法用于让当前文档退出全屏模式
（上一个调用requestFullscreen()方法的退出全屏）

vue 项目中应用

//data
fullScreenVisible 
//methods
 fullScreen() {
      this.fullScreenVisible = true;
      let element = document.querySelector(".editor-wraper"); // 指定全屏区域元素
      element.requestFullscreen();
      document.querySelector(".mode_editor").style.display = "none";
      // fullscreenchange 事件当浏览器进入或离开全屏时触发
      document.addEventListener("fullscreenchange", (e) => {
        if (document.fullscreenElement == null) {
          this.closeFullScreen();
        }
      });
    },
    // 退出全屏
    closeFullScreen() {
      this.fullScreenVisible = false;
      if (document.fullscreenElement !== null) {
        document.exitFullscreen();
        document.querySelector(".mode_editor").style.display = "block";
      }
    },