js点击按钮实现全屏效果

最新推荐文章于 2024-07-26 19:01:19 发布

原创最新推荐文章于 2024-07-26 19:01:19 发布 · 7.5k 阅读

16 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现页面全屏功能的方法。通过一个简单的按钮，用户可以轻松地切换页面的全屏状态。代码适用于多种浏览器，包括对IE11的支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮)

写一个点击按钮实现全屏的效果，话不多说，直接上代码：

首先准备一个按钮，写上点击事件

    
        <body>

		<!--准备一个按钮-->
		<button onclick="handleFullScreen()">全屏</button>

	</body>

下面写点击事件的逻辑：

        <script>
		//定义一个变量进行判断，默认false 非全屏状态
		let exitFullscreen = false
		// 全屏事件
		function handleFullScreen() {
			let element = document.documentElement;
			if(this.fullscreen) {
				if(document.exitFullscreen) {
					document.exitFullscreen();
				} else if(document.webkitCancelFullScreen) {
					document.webkitCancelFullScreen();
				} else if(document.mozCancelFullScreen) {
					document.mozCancelFullScreen();
				} else if(document.msExitFullscreen) {
					document.msExitFullscreen();
				}
			} else {
				if(element.requestFullscreen) {
					element.requestFullscreen();
				} else if(element.webkitRequestFullScreen) {
					element.webkitRequestFullScreen();
				} else if(element.mozRequestFullScreen) {
					element.mozRequestFullScreen();
				} else if(element.msRequestFullscreen) {
					// IE11
					element.msRequestFullscreen();
				}
			}
		}
	</script>

就这么多，希望能帮助到有需要的朋友！！！