本文实例讲述了JS实现指定区域的全屏显示功能。分享给大家供大家参考,具体如下:
& lt; html>
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt; title> www.jb51.net js指定区域全屏& lt;/title>
& lt; style>
# fulldiv {
背景:# fff;
宽度:100%;
text-align:中心;
高度:100%;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; h2>指定区域全屏测试& lt;/h2>
& lt;按钮id=" btn "祝辞全屏按钮& lt;/button>
& lt; div id=癴ulldiv”比;
& lt; h2>这里是全屏显示的内容& lt;/h2>
& lt;/div>
& lt;/body>
& lt; script>
var全屏=false;
让btn=. getelementbyid (btn);
让fullarea=. getelementbyid (“fulldiv”)
btn.addEventListener(“点击”,函数(){
如果(全屏){//退出全屏
如果(document.exitFullscreen) {
document.exitFullscreen ();
}else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen ();
}else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen ();
}else if (document.msExitFullscreen) {
document.msExitFullscreen ();
}
其他}{//进入全屏
如果(fullarea.requestFullscreen) {
fullarea.requestFullscreen ();
}else if (fullarea.webkitRequestFullScreen) {
fullarea.webkitRequestFullScreen ();
}else if (fullarea.mozRequestFullScreen) {
fullarea.mozRequestFullScreen ();
}else if (fullarea.msRequestFullscreen) {//IE11
fullarea.msRequestFullscreen ();
}
}
全屏=!全屏;
}）
& lt;/script>
& lt;/html>
之前
感兴趣的朋友还可以使用http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript事件相关操作与技巧大全》,《JavaScript页面元素操作技巧总结》,《JavaScript操作DOM技巧总结》,《JavaScript数据结构与算法技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
