如何利用全屏API…並進行樣式

讓我們看一下JavaScript中的全屏API。它使您可以做一個非常有力的事情：完整篩選您想要的一個特定元素。不僅如此，CSS也可以為特殊選擇器提供幫助。

每個主要瀏覽器都具有最大化瀏覽器窗口本身的形式內置的全屏功能。您按F11或⌃⌘F（PC上的Winkey⬆），瀏覽器將填充您的顯示器，直到刪除UI組件（例如窗口管理按鈕）。

當您進入全屏模式時，它最大化了顯示網頁的空間，但這並不總是您想要的。通常，您要么想完整版頁面的某些特定元素，例如視頻或遊戲。這是全屏API派上用場的地方。

全屏API有助於實現瀏覽器全屏模式無法做到的東西，例如：

• 全屏頁面的特定元素，而不是整個頁面。
• CSS中的匹配元素與：全屏偽級，該類別檢查是否設置了特定元素的全屏標誌。
• 完全控制何時進入全屏。

我們開始做吧

首先，確定需要在全屏模式下顯示哪些元素。之後，唯一的事情是檢查該元素是否具有requestfullscreen（）方法，然後在元素上調用。

讓我們從一個簡單的

元素開始：

 <div> </div>

首先，我們選擇它並檢查它是否具有該方法。如果是這樣，那麼我們在其上調用requestfullscreen方法。很簡單：

 LET FULLSCREEN = document.queryselector（“＃fullscreen”）;

如果（fullscreen.requestfullscreen）{
  fullscreen.requestfullscreen（）;
}

但是，我們希望有條件地運行此代碼，而不是有人降落在頁面上。我們將製作一個可以切換全屏模式的按鈕。

 <div>
  <button>切換全屏</button>
</div>

 LET FULLSCREEN = document.queryselector（“＃fullscreen”）;
令button = document.queryselector（“＃button”）;

button.AddeventListener（“ click”，（）=> {
  if（！document.fullscreenelemt）
    全螢幕? 。
  } 別的 {
    document.exitfullscreen（）;
  }
}）;

請注意我們如何使用document.fullscreenlement。如果以前有一個元素，那麼它將返回它。如果沒有，它將返回null。

這也是一個好主意，最好在用戶的瀏覽器中啟用了全屏模式。為此，我們可以使用document.fullscreenenabled。它返回布爾值，說我們是否可以在此特定瀏覽器中使用全屏API。用戶可能會禁用全屏，或者瀏覽器可能不支持它。

我們要介紹的最後一個方法是document.exitfullscreen（）。用戶應始終通過按鍵盤上的ESC來退出全屏模式。我們可以使用Exitfullscreen採用某種自定義方法來退出全屏模式。全屏的元素都沒關係；調用此方法後，它將返回窗口模式。

正如您在我們的按鈕元素的代碼中看到的那樣，我們首先檢查是否已經激活了全屏。然後，基於這些信息，我們要么轉到全屏模式，要么返回窗口模式。

造型全屏

關於全屏API的很酷的事情是，我們可以匹配CSS中的全屏元素。這正是：全屏偽選擇器旨在做的！

 #fullscreen：FullScreen {
  背景色：黃色；
}

如您所見，#fullscreen div是唯一在元素處於全屏模式（僅在全屏模式下）時獲得黃色背景顏色的元素。捕獲是我們實際上不能選擇這樣的任何元素。我們只能在全屏模式下選擇“根”元素。兒童元素都不會匹配。

換句話說，#Button：全屏之類的內容不會選擇全屏元素中包含的按鈕 - 也就是說，除非我們希望按鈕是全屏而不是DIV。

一些瀏覽器需要前綴才能工作。 Firefox使用-moz-full-Screen和基於Webkit的瀏覽器使用-Webkit-Full-Screen。

 #fullscreen：-webkit-full-screen {
  背景色：黃色；
}

#fullscreen：-moz-full-screen {
  背景色：黃色；
}

您是否知道，當我們處於全屏模式時，有一個偽元素在您的全屏元素下方呈現？默認情況下，假元素是黑色的。如果您想更改該偽元素的樣式，則可以這樣做：

 #fullscreen ::背景{
  背景色：Skyblue；
}

這是最後的例子。請記住，全屏模式可能與嵌入式筆無法使用，因此您需要在本文之外查看它。

以上是如何利用全屏API…並進行樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！