原生JavaScript实现元素全屏与退出全屏效果

之前写过前端screenfull实现界面全屏展示功能突然发现自己犯傻了

其实元素js中就有全屏与取消全屏的方式
html代码如下

<!DOCTYPE html>
<html>
<head>
  <title>全屏实验</title>
  <style>
  </style>
</head>
<body>
  <div id = "mian" style = "width: 100px;height: 100px;background-color: blue;">
    <button id = "screen">全屏</button>
    <button id = "CancelFullScreen">取消全屏</button>
  </div>
  <script>
      var mian = document.getElementById("mian");
      var screen = document.getElementById("screen");
      var CancelFullScreen = document.getElementById("CancelFullScreen");
      screen.onclick = function () {
        mian.requestFullscreen();
      }
      CancelFullScreen.onclick = function () {
        document.exitFullscreen();
     }
  </script>
</body>
</html>

这里我们mian元素为主体然后包裹两个按钮 screen全屏按钮设置了点击事件通过mian元素调用requestFullscreen实现mian元素占满全屏
点击全屏 screen 按钮效果如下
在这里插入图片描述
然后 CancelFullScreen按钮的点击事件就调用了 document对象的exitFullscreen方法调用后不管谁在全屏都会立刻退出