标签：Fullscreen img color Element background document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Element Fullscreen</title>
<style>
.img {
width: 200px;
transition: width 2s ease, background-color 2s ease;
&:fullscreen {
overflow: hidden;
padding: 20px;
background-color: pink;
&::backdrop {
background-color: transparent;
}
}
}
</style>
</head>
<body>
<strong>Element Fullscreen</strong>
<hr />
<span>点击图片进入全屏，按下esc或再次点击图片退出全屏</span>
<img src="./test.jpg" alt="" class="img" />
<script>
const img = document.querySelector('.img');
img.addEventListener('click', async () => {
if (!document.fullscreenElement) {
await img.requestFullscreen();
} else {
await document.exitFullscreen();
}
});
</script>
</body>
</html>
标签：Fullscreen,
img,
color,
Element,
background,
document
From： https://www.cnblogs.com/chlai/p/18169395