HTML DOM fullscreenElement 属性
HTML DOM fullscreenElement 属性用于返回当前以全屏模式显示的元素。如果给定元素未处于全屏模式，则返回 null。
语法
以下是 fullscreenElement 属性的语法 −
document.fullscreenElement
让我们看一个 fullscreenElement 属性的示例 −
注意 − 此示例仅包含 Chrome、Safari 和 Opera 的标准语法和浏览器前缀。有关您的浏览器前缀，请查看最后一部分。
示例
让我们看一个例子 −
<!DOCTYPE html>
<html>
<head>
<script>
function FullscreenEle() {
console.log(document.fullscreenElement || /*Standard Syntax*/
document.webkitFullscreenElement); /*For Chrome,Safari and Opera*/
}
setTimeout(FullscreenEle, 8000);
function EnableFullScreen() {
var elem = document.getElementById("image");
if (elem.requestFullscreen) /*Standard Syntax*/
elem.requestFullscreen();
else if (elem.webkitRequestFullscreen) /*For Chrome,Safari and Opera*/
elem.webkitRequestFullscreen();
else
console.log('You cannot go fullscreen currently')
}
</script>
</head>
<body>
<h1>Learn Blockchain</h1>
<img id="image" src="https://www.cainiaomax.com/blockchain/images/blockchain.jpg">
<br>
<button onclick="EnableFullScreen()">Go fullscreen</button>
</body>
</html>
输出
这将产生以下输出 −
点击"全屏"按钮 −
在上面的例子中 −
我们首先创建了一个 元素，其 ID 为 “image”，并将图片链接作为 src 属性值 −
<img id="image" data-fr-src="https://www.cainiaomax.com/blockchain/images/blockchain.jpg">
然后，我们创建了一个"全屏"按钮，当用户点击该按钮时，它将执行 EnableFullScreen() 方法 −
<button onclick="EnableFullScreen()">全屏</button>
EnableFullScreen() 方法使用文档对象的 getElementById() 方法获取 img 元素，并将其赋值给变量 elem。我们使用 requestFullScreen 属性检查该元素是否可以在全屏模式下打开，并使用 img 元素上的 requestFullScreen 属性。
如果该元素可以全屏打开，则我们使用 requestFullScreen() 方法将该元素设置为全屏模式。如果元素无法在全屏模式下显示，我们将使用 console.log() 方法在控制台中显示一些消息。
function EnableFullScreen() {
var elem = document.getElementById("image");
if (elem.requestFullscreen) /*Standard Syntax*/
elem.requestFullscreen();
else if (elem.webkitRequestFullscreen) /*For Chrome,Safari and Opera*/
elem.webkitRequestFullscreen();
else
console.log('You cannot go fullscreen currently')
}
由于元素全屏后我们无法点击任何内容，我们使用 setTimeout(fullscreenEle,8000) 方法指定在 8000 毫秒 (8s) 后执行 fullscreenEle() 方法 −
setTimeout(FullscreenEle, 8000);
FullscreenEle() 函数返回当前处于全屏模式的元素，并使用 console.log() 方法在控制台选项卡中显示该元素 −
function FullscreenEle() {
console.log(document.fullscreenElement|| /*标准语法*/
document.webkitFullscreenElement); /*适用于 Chrome、Safari 和 Opera*/
}
注意 − 您必须使用特定的前缀才能使本示例适用于您的目标浏览器。在上面的示例中，我们仅编写了 Chrome、Opera 和 Safari 浏览器的标准语法和浏览器前缀。以下是一些适用于您浏览器的前缀。
- 适用于 requestFullscreen
- Firefox: mozRequestFullScreen
- IE/Edge: msRequestFullscreen
- For fullscreenElement
- Firefox: mozFullScreenElement
- IE/Edge: msRequestFullscreen
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
