<!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退出全屏

javascript全屏操作的更多相关文章

  1. JavaScript全屏显示

    JavaScript全屏显示 需要引入的库 https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js https://cdn.bootcss.com/scr ...

  2. HTML5全屏操作API

    一.定义:HTML5规范允许自定义网页上的任一元素全屏显示,存在兼容问题 二.使用: ①基本: Node.RequestFullScreen()开启全屏显示 Node.CancelFullScreen ...

  3. HTML5--浏览器全屏操作、退出全屏、是否全屏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. JavaScript 全屏展示

    浏览器都有页面全屏的功能 F11 ,那么如何用JavaScript控制页面全屏呢?MDN上提供的的API , 一个小demo验证一下! <!DOCTYPE html> <html l ...

  5. Fullscreen API：全屏操作

    function launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } ...

  6. dos初始操作和全屏方法

    1.初始操作 mount d d:\ ;选择挂载的硬盘 d:\ cd Dos cd MASM ;到达debug/edit/link/masm.exe文件的位置 ;然后可以进行debug/edit xx ...

  7. HTML5实现网页的全屏切换

    使用HTML5提供的JavaScript Api可以实现主流浏览器的全屏和退出全屏操作,封装成进入全屏和退出全屏的函数如下: //进入全屏 function enterFullScreen() { v ...

  8. HTML5 全屏特性

    全屏功能是浏览器很早就支持的一项功能了,可以让你页面中的video, image ,div 等等子元素实现全屏浏览,从而带来更好的视觉体验,来看看怎么使用吧.先来看看有哪些API和事件支持. API ...

  9. How to Use HTML5 FUll Screen API（如何使用HTML5全屏接口） 【精】

    原文链接:http://www.sitepoint.com/use-html5-full-screen-api/ 如果你不太喜欢变化太快的东西,那么web开发可能不适合你.我曾在2012年末有写过Fu ...

随机推荐

  1. vbs中的"WScript.Network"[属性与方法]

    属性ComputerName                  计算机名UserDomain                    所属局域网域的域名UserName                 ...

  2. ES6之函数参数

    ES6中对于函数参数主要增加了以下内容: 1.参数的扩展/数组的展开: 2.默认参数. 什么是参数的扩展? 看下面代码: <!DOCTYPE html> <html lang=&qu ...

  3. [Forward]Sweeping the IDisposable minefield

    IDisposable has been around since the beginning of .Net.The basic premise is simple.. Developers don ...

  4. 数据表记录包含表索引和数值，请对表索引相同的记录进行合并，即将相同索引的数值进行求和运算，输出按照key值升序进行输出。

    题目描述 数据表记录包含表索引和数值,请对表索引相同的记录进行合并,即将相同索引的数值进行求和运算,输出按照key值升序进行输出. 输入描述: 先输入键值对的个数然后输入成对的index和value值 ...

  5. MYSQL查询前30条数据

    , LIMIT 接受一个或两个数字参数. 参数必须是一个整数常量. 如果给定两个参数,第一个参数指定第一个返回记录行的偏移量, 第二个参数指定返回记录行的最大数目. 初始记录行的偏移量是 (而不是 )

  6. 【Html】Vue动态插入组件

    html: <div id="app"> <p>{{ message }}</p> <button @click="add('a ...

  7. Spring JDBC调用存储过程

    以下示例将演示spring jdbc如何调用存储过程.将通过调用存储过程来读取Student表中的一个可用记录.将传递一个学生ID并获取学生记录信息. 语法: SimpleJdbcCall jdbcC ...

  8. TPshop的规格表设计原理机制

    TPshop商品规格比较简单, 数据库设计清晰, 先看上图购买商品时对应的选择, 不同规格有着不同的价格和不同的库存. 再看看后台对应的设置,手机例子 颜色:黑色 白色 金色 内存:32G 64G  ...

  9. 114ic电子元器件网

    http://www.114ic.cn/datasheet-pdf/TPA0211DGN-163932.html

  10. ubuntu 14.04安装 DevStack的脚本配置文件——localrc

    本文ubuntu 14.04安装 DevStack的脚本配置文件——localrc,本文件名已经逐渐被取代,但是出于后向兼容性,使用该文件仍然可以为stack.sh安装脚本指定安装DevStack时的 ...