javascript全屏操作

最新推荐文章于 2025-07-16 06:06:17 发布

转载最新推荐文章于 2025-07-16 06:06:17 发布 · 55 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yesyes/p/7264027.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用HTML、CSS及JavaScript实现网页全屏显示的方法。通过简单的代码示例展示了如何响应按钮点击事件来使页面进入全屏模式，并提供了退出全屏的方法。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  html,
  body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    background: green;
  }
  </style>
</head>

<body>
  <button id="btn">button</button>
  <p id="">这是一个段落</p>
  <script type="text/javascript">
  var btn = document.querySelector('#btn');
  btn.addEventListener('click', function(e) {
    if (document.body.RequestFullscreen) {
      document.body.RequestFullscreen();
    } else if (document.body.webkitRequestFullscreen) {
      document.body.webkitRequestFullscreen();
    } else {
      console.log('不支持')
    }
    // e.preventDefault()
  })
  </script>
</body>

</html>

点击按钮将会全屏，esc退出全屏

转载于:https://www.cnblogs.com/yesyes/p/7264027.html