JS实现指定区域的全屏显示功能示例
程序员文章站
2023-11-09 12:41:46
本文实例讲述了js实现指定区域的全屏显示功能。分享给大家供大家参考，具体如下：
本文实例讲述了js实现指定区域的全屏显示功能。分享给大家供大家参考，具体如下：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>www.jb51.net js指定区域全屏</title>
<style>
#fulldiv {
background: #fff;
width: 100%;
text-align: center;
height: 100%;
}
</style>
</head>
<body>
<h1>指定区域全屏测试</h1>
<button id="btn">全屏按钮</button>
<div id="fulldiv">
<h1>这里是全屏显示的内容</h1>
</div>
</body>
<script>
var fullscreen = false;
let btn = document.getelementbyid('btn');
let fullarea = document.getelementbyid('fulldiv')
btn.addeventlistener('click',function(){
if (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 (fullarea.requestfullscreen) {
fullarea.requestfullscreen();
} else if (fullarea.webkitrequestfullscreen) {
fullarea.webkitrequestfullscreen();
} else if (fullarea.mozrequestfullscreen) {
fullarea.mozrequestfullscreen();
} else if (fullarea.msrequestfullscreen) {
// ie11
fullarea.msrequestfullscreen();
}
}
fullscreen = !fullscreen;
})
</script>
</html>
感兴趣的朋友还可以使用在线html/css/javascript代码运行工具http://tools.jb51.net/code/htmljsrun测试上述代码运行效果。
更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript事件相关操作与技巧大全》、《javascript页面元素操作技巧总结》、《javascript操作dom技巧总结》、《javascript数据结构与算法技巧总结》及《javascript错误与调试技巧总结》
希望本文所述对大家javascript程序设计有所帮助。