js实现简单页⾯全屏
本⽂实例为⼤家分享了js实现简单页⾯全屏，供⼤家参考，具体内容如下
全屏效果为传⼊div元素全屏：
代码块
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
<div >
<button id="btn">js控制页⾯的全屏展⽰和退出全屏显⽰</button>
css简单网页代码<div id="content" >
<h1>js控制页⾯的全屏展⽰和退出全屏显⽰</h1>
</div>
</div>
</body>
<style type="text/css">
#content:-webkit-full-screen {
background-color:rgb(255, 255, 12);
}
</style>
<script language="JavaScript">
var elem = ElementById("content");
console.log(elem);
requestFullScreen(elem);
};
function requestFullScreen(element) {
var requestMethod = questFullScreen || element.webkitRequestFullScreen || RequestFullScreen || element.msRequestFullScreen;  if (requestMethod) {
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
</script>
</html>
屏幕显⽰差异
这⾥值得注意的是Gecko和WebKit实现之间的关键区别：Gecko 会为元素⾃动添加 CSS 使其伸展以便铺满屏幕：“width: 100%; height: 100%”。 WebKit 则不会这么做；它会让全屏的元素以原始尺⼨居中到屏幕中央，其余部分变为⿊⾊。要在WebKit中获得相同的全屏⾏为，您需要添加⾃⼰的“width：100％; height：100％;” CSS规则到元素⾃⼰
#myvideo:-webkit-full-screen {
width: 100%;
height: 100%;
}
注意
如果div不设置background style则使⽤webkitRequestFullScreen全屏时，div会被⿊⾊填充.
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。