資料結構
網路
關係型資料庫管理系統
作業系統
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.tw/blockchain/images/blockchain.jpg">
<br>
<button onclick="EnableFullScreen()">Go fullscreen</button>
</body>
</html>輸出
這將產生以下輸出：
單擊“進入全屏”後：
在上面的例子中：
我們首先建立了一個帶有 id 為“image”的 元素，並使用 src 屬性值作為影像連結：
<img id="image" data-fr-src="https://tutorialspoint.tw/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 次檢視
