📅 最后修改于: 2023-12-03 15:15:35.089000 🧑 作者: Mango
fullscreenElement 属性用于判断当前文档是否正在全屏模式中，并返回正在全屏模式中的元素。如果文档没有处于全屏模式，则返回 null。
document.fullscreenElement
正在全屏模式中的元素，如果当前文档不在全屏模式中则返回 null。
<!DOCTYPE html>
<html>
<head>
<title>fullscreenElement 示例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<p>在下面任意一个元素上双击以进入全屏模式</p>
<div id="box1" style="background: red; height: 150px;"></div>
<div id="box2" style="background: blue; height: 150px;"></div>
<script>
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
box1.addEventListener('dblclick', function() {
box1.requestFullscreen();
});
box2.addEventListener('dblclick', function() {
box2.requestFullscreen();
});
document.addEventListener('fullscreenchange', function() {
if (document.fullscreenElement === null) {
console.log('退出全屏');
} else {
console.log('进入全屏，当前全屏元素为：', document.fullscreenElement);
}
});
</script>
</body>
</html>
在上述示例中，我们创建了两个 <div> 元素，并为它们绑定了双击事件，事件触发时调用 requestFullscreen() 方法进入全屏模式。此外，我们还绑定了 fullscreenchange 事件，该事件在进入或退出全屏模式时触发，通过判断 fullscreenElement 属性是否为 null 来判断当前是否处于全屏模式中。
该属性可以在所有现代浏览器中使用，包括 Chrome、Firefox、Edge、Safari、Opera 等。IE 不支持全屏 API，因此也不支持该属性。