<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 200px;
height:200px;
background: red;
}
</style>
</head>
<body>
<div id='box'>
<div id="box1">
开启box全屏
</div>
<br><br><br>
<div id="box2">
关闭box全屏
</div>
</div>
<script>
document.querySelector("#box1").onclick = function () {
var div = document.querySelector("div");
//要在用户授权全屏后才能准确获取当前的状态
if (div.requestFullscreen) {
div.requestFullscreen();
} else if (div.webkitRequestFullScreen) {
div.webkitRequestFullScreen();
}
};
document.querySelector("#box2").onclick = function () {
document.webkitCancelFullScreen();
};
</script>
</body>
</html>
requestFullScreen元素全屏显示
最新推荐文章于 2024-04-16 09:08:56 发布