<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.test {
width: 500px;
height: 300px;
background: #666;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="test">
<h1>这是一个h1标签</h1>
<p>这是内容</p>
<button id="full">全屏显示</button>
<button id="cancel">关闭全屏</button>
</div>
<script>
document.querySelector("#full").onclick = function () {
var div = document.querySelector("div");
//要在用户授权全屏后才能准确获取当前的状态
if (div.requestFullscreen) {
div.requestFullscreen();
} else if (div.webkitRequestFullScreen) {
div.webkitRequestFullScreen();
}
};
document.querySelector("#cancel").onclick = function () {
document.webkitCancelFullScreen();
};
</script>
</body>
</html>
requestFullScreen元素全屏显示
最新推荐文章于 2024-06-19 17:40:21 发布
1735
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
