您的位置：首页 > Web前端 > JavaScript

js点击按钮实现全屏效果

2019-06-11 13:19 1016 查看
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_43052274/article/details/91427479

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

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

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

[code]
<body>

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

</body>

             下面写点击事件的逻辑：

[code]        <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>

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航