フルスクリーンAPIを活用する方法…そしてスタイルをスタイルします

JavaScriptのフルスクリーンAPIを見てみましょう。それはあなたがかなり強力なことをすることを可能にします：あなたが望む特定の要素を正確に1つ完全にスクリーニングします。それだけでなく、CSSは特別なセレクターでも役立ちます。

すべての主要なブラウザには、ブラウザウィンドウ自体を最大化するという形でフルスクリーン機能が組み込まれています。 F11または⌃⌘F（PCのWinkey⬆）を押すと、ブラウザがモニターを埋め、UIコンポーネント（ウィンドウ管理ボタンなど）を削除します。

フルスクリーンモードに入ると、Webページが表示されるスペースを最大化しますが、これは必ずしも必要なものではありません。より多くの場合、ビデオやゲームなど、ページの特定の要素をフルスクリーンする必要があります。これは、フルスクリーンAPIが役立つ場所です。

フルスクリーンAPIは、ブラウザのフルスクリーンモードができないことを実現するのに役立ちます。

• フルスクリーンページ全体ではなく、ページの特定の要素。
• CSSの要素を次のように一致させます：フルスクリーンの擬似クラス。特定の要素のフルスクリーンフラグが設定されているかどうかをチェックします。
• フルスクリーンに入る時期を完全に制御します。

やりましょう

まず、フルスクリーンモードで表示する必要がある要素を決定します。その後、唯一のことは、その要素にrequestfullscreen（）メソッドがあるかどうかを確認し、要素で呼び出すことです。

フルスクリーンへのシンプルな

要素から始めましょう：

 <div> </div>

まず、それを選択し、メソッドがあるかどうかを確認します。もしそうなら、その上のrequestfullscreenメソッドを呼び出します。それはとても単純です：

 fullscreen = document.queryselector（ "＃fullscreen"）;

if（fullscreen.requestfullscreen）{
  fullscreen.requestfullscreen（）;
}

ただし、誰かがページに着地するとすぐに、このコードを条件付きで実行したいと考えています。フルスクリーンモードを切り替えるボタンを作成します。

 <div>
  フルスクリーンを切り替えます
</div>

 fullscreen = document.queryselector（ "＃fullscreen"）;
let button = document.queryselector（ "＃button"）;

button.addeventlistener（ "click"、（）=> {
  if（！document.fullscreenelement）{
    FullScreen？.Requestfullscreen（）;
  } それ以外 {
    document.exitfullscreen（）;
  }
}）;

document.fullscreenelementの使用方法に注意してください。以前にフルスクリーンになった要素がある場合、それはそれを返します。そうでない場合は、nullを返します。

また、ユーザーのブラウザでフルスクリーンモードが有効になっているかどうかを確認することをお勧めします。そのためには、document.fullscreenenabledを使用できます。この特定のブラウザでフルスクリーンAPIを使用できるかどうかを示すブール値を返します。フルスクリーンはユーザーによって無効になる可能性があります。または、ブラウザがサポートしない場合があります。

カバーする最後の方法は、document.exitfullscreen（）です。ユーザーは、キーボードのESCを押して、常にフルスクリーンモードを終了する機能を備えている必要があります。 Exitfullscreenを使用してフルスクリーンモードを終了するためのある種のカスタム方法を実行できます。どの要素がフルスクリーンであったのかは関係ありません。この方法を呼び出すと、ウィンドウモードに戻ります。

ボタン要素のコードでわかるように、最初にフルスクリーンがすでにアクティブになっているかどうかを確認します。次に、その情報に基づいて、フルスクリーンモードに移動するか、ウィンドウモードに戻ります。

フルスクリーンのスタイリング

フルスクリーンAPIのクールな点は、CSSのフルスクリーン要素と一致できることです。それがまさに次のことです：フルスクリーンの擬似セレクターはそうするように設計されています！

 #fullscreen：フルスクリーン{
  背景色：黄色。
}

ご覧のとおり、#fullscreen divは、要素がフルスクリーンモードであるときに黄色の背景色を取得する唯一の要素であり、フルスクリーンモードのみです。キャッチは、このような要素を実際に選択できないということです。フルスクリーンモードでのルート要素のみを選択できます。子供の要素はどれも一致しません。

言い換えれば、#button：Fullscreenのようなものは、フルスクリーン要素に含まれるボタンを選択しません。つまり、ボタンをDivの代わりにフルスクリーンにしたくない限り。

一部のブラウザでは、これが機能するためにプレフィックスが必要です。 Firefoxは、-Moz-Full-ScreenおよびWebKitベースのブラウザを使用して-Webkit-Full-Screenを使用します。

 #fullscreen：-webkit-full-screen {
  背景色：黄色。
}

#fullscreen：-moz-full-screen {
  背景色：黄色。
}

フルスクリーンモードのときに、フルスクリーン要素のすぐ下にレンダリングされる擬似エレメントがあることをご存知ですか？デフォルトでは、擬似要素は黒です。その擬似要素のスタイルを変更したい場合は、次のようにすることができます。

 #fullscreen :: backdrop {
  背景色：SkyBlue;
}

これが最後の例です。フルスクリーンモードは埋め込まれたペンでは動作しない可能性があるため、この記事の外で表示する必要があることに注意してください。

以上がフルスクリーンAPIを活用する方法…そしてスタイルをスタイルしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。