当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS实现指定区域的全屏显示功能示例

JS实现指定区域的全屏显示功能示例

2019年07月23日  | 移动技术网IT编程  | 我要评论

本文实例讲述了js实现指定区域的全屏显示功能。分享给大家供大家参考，具体如下：

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>www.jb51.net js指定区域全屏</title>
    <style>
      #fulldiv {
        background: #fff;
        width: 100%;
        text-align: center;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <h1>指定区域全屏测试</h1>
    <button id="btn">全屏按钮</button>
    <div id="fulldiv">
      <h1>这里是全屏显示的内容</h1>
    </div>
  </body>
  <script>
    var fullscreen = false;
    let btn = document.getelementbyid('btn');
    let fullarea = document.getelementbyid('fulldiv')
    btn.addeventlistener('click',function(){  
      if (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 (fullarea.requestfullscreen) {
          fullarea.requestfullscreen();
        } else if (fullarea.webkitrequestfullscreen) {
          fullarea.webkitrequestfullscreen();
        } else if (fullarea.mozrequestfullscreen) {
          fullarea.mozrequestfullscreen();
        } else if (fullarea.msrequestfullscreen) {
          // ie11
          fullarea.msrequestfullscreen();
        }
      }
      fullscreen = !fullscreen;
    })
  </script>
</html>

感兴趣的朋友还可以使用在线html/css/javascript代码运行工具测试上述代码运行效果。

更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript事件相关操作与技巧大全》、《javascript页面元素操作技巧总结》、《javascript操作dom技巧总结》、《javascript数据结构与算法技巧总结》及《javascript错误与调试技巧总结》

希望本文所述对大家javascript程序设计有所帮助。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网