数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究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://tutorialspoint.com/blockchain/images/blockchain.jpg">
<br>
<button onclick="EnableFullScreen()">Go fullscreen</button>
</body>
</html>输出
这将产生以下输出：
单击“进入全屏”后：
在上面的例子中：
我们首先创建了一个带有 id 为“image”的 元素，并使用 src 属性值作为图像链接：
<img id="image" data-fr-src="https://tutorialspoint.com/blockchain/images/blockchain.jpg">
然后，我们创建了一个“进入全屏”按钮，当用户单击该按钮时，它将执行 EnableFullScreen() 方法：
<button onclick="EnableFullScreen()">Go fullscreen</button>
EnableFullScreen() 方法使用 document 对象的 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 毫秒（8 秒）后执行 fullscreenEle() 方法：
setTimeout(FullscreenEle, 8000);
FullscreenEle() 函数返回当前处于全屏模式的元素，并使用 console.log() 方法在控制台选项卡中显示该元素：
function FullscreenEle() {
console.log(document.fullscreenElement|| /*Standard Syntax*/
document.webkitFullscreenElement); /*For Chrome,Safari and Opera*/
}注意 - 您必须对您的目标浏览器使用特定的前缀才能使此示例正常工作。在上面的示例中，我们仅编写了标准语法和 Chrome、Opera 和 Safari 浏览器的浏览器前缀。以下是您浏览器的一些前缀。
- 对于 requestFullscreen
- Firefox：mozRequestFullScreen
- IE/Edge：msRequestFullscreen
- 对于 fullscreenElement
- Firefox：mozFullScreenElement
- IE/Edge：msRequestFullscreen
108 次查看
