當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端学习（2641）：懂代码之header表头页之控制全屏显示

發布時間：2023/12/9 HTML 22 豆豆

生活随笔收集整理的這篇文章主要介紹了前端学习（2641）：懂代码之header表头页之控制全屏显示小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<div class="btn-fullscreen" @click="handleFullScreen"><el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom"><i class="el-icon-rank"></i></el-tooltip></div> // 全屏事件handleFullScreen() {let element = document.documentElement;if (this.fullscreen) {if (document.exitFullscreen) {document.exitFullscreen();} else if (document.webkitCancelFullScreen) {document.webkitCancelFullScreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();}} else {if (element.requestFullscreen) {element.requestFullscreen();} else if (element.webkitRequestFullScreen) {element.webkitRequestFullScreen();} else if (element.mozRequestFullScreen) {element.mozRequestFullScreen();} else if (element.msRequestFullscreen) {// IE11element.msRequestFullscreen();}}this.fullscreen = !this.fullscreen;} ```控制全屏顯示 ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20201125125418551.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM5MjQ4OQ==,size_16,color_FFFFFF,t_70#pic_center)

總結

以上是生活随笔為你收集整理的前端学习（2641）：懂代码之header表头页之控制全屏显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。