js控制div的全屏展示和退出全屏显示

最新推荐文章于 2024-05-17 13:52:13 发布

天香自然，地上红豆

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量148

点赞数 3

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/tianxianghuiwei/article/details/138265815

版权

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    #content:-webkit-full-screen {
      background-color:rgb(255, 255, 12);
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div style="margin:0 auto;height:600px;width:700px;"> 
  <button id="btn" onclick="btnClick()">js控制div的全屏展示和退出全屏显示</button> 
  <div id="content" style="margin:0 auto;height:500px;width:700px; background:#ccc;" > 
    <h1>js控制页面的全屏展示和退出全屏显示</h1> 
  </div>
</div>
  <script>
    function btnClick(){
      	var element= document.getElementById("content"); 
      	if (this.isFullscreen()) { // 全屏
      		exitFullScreen();
	   	} else {
   		  	if (element.requestFullscreen) {
	        	element.requestFullscreen();
	      	} else if (element.webkitRequestFullScreen) {
	        	element.webkitRequestFullScreen();
	      	} else if (element.mozRequestFullScreen) {
	        	element.mozRequestFullScreen();
	      	} else if (element.msRequestFullscreen) {
	        	element.msRequestFullscreen();  // IE11
	      	}
	    }
  	}
  

	// 退出全屏
	function exitFullScreen () {
	    let exitFullScreen = document.exitFullScreen || 
	    document.mozCancelFullScreen || 
	    document.webkitExitFullscreen || 
	    document.msExitFullscreen;
	    if (exitFullScreen) {
	      exitFullScreen.call(document);
	    }
	 }
	// 判断是否全屏
	function isFullscreen () {
	    return document.fullscreenElement ||
	      document.msFullscreenElement ||
	      document.mozFullScreenElement ||
	      document.webkitFullscreenElement || false;
	 }
  </script>
</body>
</html>

功能讲解：此功能要先用一个div包裹你想要全屏的内容，通过操作这个div来实现全屏与退出的功能；希望可以帮助大家；