点击某个元素的时候让某个元素全屏显示
这段代码定义了一个函数
goToFullScreen(element)
,用于切换指定元素(或者默认全屏)的全屏模式。该函数支持各种主流浏览器,包括 Chrome、Firefox、Safari 以及 Internet Explorer 和 Edge 等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
html,
body {
width: 100%;
height: 100%;
}
.Box {
width: 100vw;
height: 100vh;
background: #ccc;
}
#imgSrc {
width: 300px;
height: auto;
}
</style>
</head>
<body>
<div class="Box">
<img id="imgSrc"
src="https://ts1.cn.mm.bing.net/th?id=OIP-C.mH9YLFEL5YdVxJM82mjVJQHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"
alt="">
<button class="scrallFall">点击让图片进行全屏显示</button>
</div>
</body>
<script>
const goToFullScreen = (element) => {// 定义名为 "goToFullScreen" 的函数,并接受一个参数 "element"。
element = element || document.body;// 如果传入 "element" 参数则以该元素为目标,否则为整个文档体 "document.body"
if (element.requestFullscreen) {// 判断是否支持 W3C 标准的请求全屏接口
element.requestFullscreen();// 通过调用 requestFullscreen() 方法来请求进入全屏模式
} else if (element.mozRequestFullScreen) {// 判断是否支持 moz 的非标准客户端 API 请求接口
element.mozRequestFullScreen();// 通过调用 mozRequestFullScreen() 方法来请求进入全屏模式
} else if (element.msRequestFullscreen) {// 判断是否支持 Microsoft 提供的 PC Edge 浏览器和 IE11 浏览器专属 Api 接口
element.msRequestFullscreen();// 通过调用 msRequestFullscreen() 方法来请求进入全屏模式
} else if (element.webkitRequestFullscreen) {// 判断是否支持 Webkit 内核标准请求接口
element.webkitRequestFullScreen();// 通过调用 webkitRequestFullScreen() 方法来请求进入全屏模式
}
};
const img = document.querySelector('#imgSrc');
const btn = document.querySelector('.scrallFall');
btn.addEventListener("click", () => {
goToFullScreen(img);
});
</script>
</html>