demo.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width: 250px;
height: 250px;
background-color: blue;
margin: 100px auto;
border-radius: 50%;
}
/* 全屏伪类(一种状态,在全屏时的状态) */
.box:-webkit-full-screen{
background-color: orange;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var box = document.querySelector(".box");
box.onclick = function() {
//全屏 兼容写法
if(box.requestFullscreen){
box.requestFullscreen(); // W3C的推荐写法 cancleFullscreen() //关闭全屏
}else if(box.webkitRequestFullScreen){
box.webkitRequestFullScreen(); // google浏览器 webkitCancleFullScreen() //关闭全屏
}else if(box.mozRequestFullScreen){
box.mozRequestFullScreen(); // 火狐浏览器
}
}
</script>
</body>
</html>