<!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. python将dict中的unicode打印成中文

    import json a = {u'content': {u'address_detail': {u'province': u'\u5409\u6797\u7701', u'city': u'\u9 ...

  2. 前端CSS-font属性,超链接的美化,css精灵,background综合属性

    前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...

  3. 将url参数转为json对象

    /** * 将url参数转为json对象 * * @param str * @returns {{}} */ function parseQueryString(str){ arr = [], len ...

  4. PCL深度图像(2)

    (1)点云到深度图与可视化的实现 区分点云与深度图本质的区别 1.深度图像也叫距离影像,是指将从图像采集器到场景中各点的距离(深度)值作为像素值的图像.获取方法有:激光雷达深度成像法.计算机立体视觉成 ...

  5. js判断类型的方法

    //判断类型 var arr=[]; Object.prototype.toString.call(arr)=='[object Array]' //判断是否是包含关系 function elCont ...

  6. Android studio 3+版本apk安装失败问题

    studio2.3升级到3.1之后将apk发给别人下载到手机上安装,华为提示安装包无效或与操作系统不兼容,魅族提示apk仅为测试版,要求下载正式版安装. 在网上找了一下,发现是studio3.0之后的 ...

  7. JavaScript实现继承的混合方式

    实现JavaScript继承的最简单的方式是call方法(或者apply方法)及原型链方法,但这两种方法都有缺陷,而其混合体就是很好的继承实现方式.下面举例说明: function Animal(ag ...

  8. php 从1加到100

    <?php //1-100利用for循环1-100累加 $sum=0;//初始化sum值为0 for($i=1;$i<=100;$i++)//定义i,循环次数,一般求1-100的和,从1开 ...

  9. [转]Android精品开源项目整理

    前言:       无论你是android的初学者,还有是android开发多年的高手,可能都会有很多想法和经验希望与人分享交流,渴望能够接触到更多的实战项目,正所谓所谓与高手论道才能互补所长,与英雄 ...

  10. 【转】【WPF】WPF绑定用法

    一．简介 为了后面行文顺利,在进入正文之前,我们首先对本文所涉及到的绑定知识进行简单地介绍.该节包含绑定的基本组成以及构建方式. WPF中的绑定完成了绑定源和绑定目标的联动.一个绑定常常由四部分组成: ...