微客导航 » 文章资讯 » js实现简单页面全屏

js实现简单页面全屏

2023-08-14 01:50:04 173

本文实例为大家分享了js实现简单页面全屏，供大家参考，具体内容如下

全屏效果为传入div元素全屏：

代码块





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

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

#content:-webkit-full-screen{ background-color:rgb(255,255,12); } document.getElementById("btn").οnclick=function(){ varelem=document.getElementById("content"); console.log(elem); requestFullScreen(elem); }; functionrequestFullScreen(element){ varrequestMethod=element.requestFullScreen||element.webkitRequestFullScreen||element.mozRequestFullScreen||element.msRequestFullScreen; if(requestMethod){ requestMethod.call(element); }elseif(typeofwindow.ActiveXObject!=="undefined"){ varwscript=newActiveXObject("WScript.Shell"); if(wscript!==null){ wscript.SendKeys("{F11}"); } } }

屏幕显示差异

这里值得注意的是Gecko和WebKit实现之间的关键区别：Gecko会为元素自动添加CSS使其伸展以便铺满屏幕：“width:100%;height:100%”。WebKit则不会这么做；它会让全屏的元素以原始尺寸居中到屏幕中央，其余部分变为黑色。要在WebKit中获得相同的全屏行为，您需要添加自己的“width：100％;height：100％;”CSS规则到元素自己

#myvideo:-webkit-full-screen{
width:100%;
height:100%;
}

注意

如果div不设置backgroundstyle则使用webkitRequestFullScreen全屏时，div会被黑色填充.

MDN参考

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

js实现简单页面全屏

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

热门推荐

随机推荐