<!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元素全屏显示
猜你喜欢
转载自blog.csdn.net/Honey_tianming/article/details/84108087
今日推荐
周排行